Merge branch 'zhsama/assemble-var-input' into feat/pull-a-variable

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

@@ -161,6 +161,19 @@ const ComponentPicker = ({
     editor.dispatchCommand(KEY_ESCAPE_COMMAND, escapeEvent)
   }, [editor])
 
+  const handleSelectAssembleVariables = useCallback(() => {
+    editor.update(() => {
+      const match = checkForTriggerMatch(triggerString, editor)
+      if (!match)
+        return
+      const needRemove = $splitNodeContainingQuery(match)
+      if (needRemove)
+        needRemove.remove()
+    })
+    workflowVariableBlock?.onAssembleVariables?.()
+    handleClose()
+  }, [editor, checkForTriggerMatch, triggerString, workflowVariableBlock, handleClose])
+
   const handleSelectAgent = useCallback((agent: { id: string, title: string }) => {
     editor.update(() => {
       const needRemove = $splitNodeContainingQuery(checkForTriggerMatch(triggerString, editor)!)
@@ -182,6 +195,7 @@ const ComponentPicker = ({
   }, [editor, checkForTriggerMatch, triggerString, agentBlock, handleClose])
 
   const isAgentTrigger = triggerString === '@' && agentBlock?.show
+  const showAssembleVariables = triggerString === '/' && workflowVariableBlock?.showAssembleVariables
   const agentNodes = agentBlock?.agentNodes || []
 
   const renderMenu = useCallback<MenuRenderFn<PickerBlockMenuOption>>((
@@ -246,6 +260,8 @@ const ComponentPicker = ({
                                 onBlur={handleClose}
                                 showManageInputField={workflowVariableBlock.showManageInputField}
                                 onManageInputField={workflowVariableBlock.onManageInputField}
+                                showAssembleVariables={showAssembleVariables}
+                                onAssembleVariables={showAssembleVariables ? handleSelectAssembleVariables : undefined}
                                 autoFocus={false}
                                 isInCodeGeneratorInstructionEditor={currentBlock?.generatorType === GeneratorType.code}
                               />
@@ -289,7 +305,7 @@ const ComponentPicker = ({
         }
       </>
     )
-  }, [isAgentTrigger, agentNodes, allFlattenOptions.length, workflowVariableBlock?.show, floatingStyles, isPositioned, refs, handleSelectAgent, handleClose, workflowVariableOptions, isSupportFileVar, currentBlock?.generatorType, handleSelectWorkflowVariable, queryString, workflowVariableBlock?.showManageInputField, workflowVariableBlock?.onManageInputField])
+  }, [isAgentTrigger, agentNodes, allFlattenOptions.length, workflowVariableBlock?.show, floatingStyles, isPositioned, refs, handleSelectAgent, handleClose, workflowVariableOptions, isSupportFileVar, currentBlock?.generatorType, handleSelectWorkflowVariable, queryString, workflowVariableBlock?.showManageInputField, workflowVariableBlock?.onManageInputField, showAssembleVariables, handleSelectAssembleVariables])
 
   return (
     <LexicalTypeaheadMenuPlugin

web/app/components/base/prompt-editor/types.ts

@@ -71,6 +71,8 @@ export type WorkflowVariableBlockType = {
   getVarType?: GetVarType
   showManageInputField?: boolean
   onManageInputField?: () => void
+  showAssembleVariables?: boolean
+  onAssembleVariables?: () => void
 }
 
 export type AgentNode = {

web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx

@@ -10,6 +10,7 @@ import { useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
 import { CodeAssistant, MagicEdit } from '@/app/components/base/icons/src/vender/line/general'
+import { MagicWand } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import Input from '@/app/components/base/input'
 import {
@@ -255,6 +256,8 @@ type Props = {
   isInCodeGeneratorInstructionEditor?: boolean
   showManageInputField?: boolean
   onManageInputField?: () => void
+  showAssembleVariables?: boolean
+  onAssembleVariables?: () => void
   autoFocus?: boolean
   preferSchemaType?: boolean
 }
@@ -272,6 +275,8 @@ const VarReferenceVars: FC<Props> = ({
   isInCodeGeneratorInstructionEditor,
   showManageInputField,
   onManageInputField,
+  showAssembleVariables,
+  onAssembleVariables,
   autoFocus = true,
   preferSchemaType,
 }) => {
@@ -285,6 +290,13 @@ const VarReferenceVars: FC<Props> = ({
     }
   }
 
+  const handleAssembleVariables = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    onAssembleVariables?.()
+    onClose?.()
+  }
+
   const filteredVars = vars.filter((v) => {
     const children = v.vars.filter(v => checkKeys([v.variable], false).isValid || isSpecialVar(v.variable.split('.')[0]))
     return children.length > 0
@@ -393,6 +405,25 @@ const VarReferenceVars: FC<Props> = ({
           />
         )
       }
+      {
+        showAssembleVariables && (
+          <div className="flex items-center border-t border-divider-subtle pt-1">
+            <button
+              type="button"
+              className="flex h-8 w-full items-center px-3 text-text-tertiary hover:text-text-secondary"
+              onClick={handleAssembleVariables}
+              onMouseDown={e => e.preventDefault()}
+            >
+              <span className="mr-1 flex h-4 w-4 items-center justify-center rounded bg-util-colors-indigo-indigo-500/10">
+                <MagicWand className="h-3.5 w-3.5 text-util-colors-indigo-indigo-500" />
+              </span>
+              <span className="system-xs-medium truncate" title={t('nodes.tool.assembleVariables', { ns: 'workflow' })}>
+                {t('nodes.tool.assembleVariables', { ns: 'workflow' })}
+              </span>
+            </button>
+          </div>
+        )
+      }
     </>
   )
 }

web/i18n/en-US/workflow.json

@@ -767,6 +767,7 @@
   "nodes.templateTransform.inputVars": "Input Variables",
   "nodes.templateTransform.outputVars.output": "Transformed content",
   "nodes.tool.authorize": "Authorize",
+  "nodes.tool.assembleVariables": "Assemble variables",
   "nodes.tool.inputVars": "Input Variables",
   "nodes.tool.insertPlaceholder1": "Type or press",
   "nodes.tool.insertPlaceholder2": "insert variable",

web/i18n/ja-JP/workflow.json

@@ -765,6 +765,7 @@
   "nodes.templateTransform.inputVars": "入力変数",
   "nodes.templateTransform.outputVars.output": "変換されたコンテンツ",
   "nodes.tool.authorize": "認証する",
+  "nodes.tool.assembleVariables": "変数を組み立てる",
   "nodes.tool.inputVars": "入力変数",
   "nodes.tool.insertPlaceholder1": "タイプするか押してください",
   "nodes.tool.insertPlaceholder2": "変数を挿入する",

web/i18n/zh-Hans/workflow.json

@@ -765,6 +765,7 @@
   "nodes.templateTransform.inputVars": "输入变量",
   "nodes.templateTransform.outputVars.output": "转换后内容",
   "nodes.tool.authorize": "授权",
+  "nodes.tool.assembleVariables": "组装变量",
   "nodes.tool.inputVars": "输入变量",
   "nodes.tool.insertPlaceholder1": "键入",
   "nodes.tool.insertPlaceholder2": "插入变量",

web/i18n/zh-Hant/workflow.json

@@ -765,6 +765,7 @@
   "nodes.templateTransform.inputVars": "輸入變數",
   "nodes.templateTransform.outputVars.output": "轉換後內容",
   "nodes.tool.authorize": "授權",
+  "nodes.tool.assembleVariables": "組裝變數",
   "nodes.tool.inputVars": "輸入變數",
   "nodes.tool.insertPlaceholder1": "輸入或按壓",
   "nodes.tool.insertPlaceholder2": "插入變數",