support variable for number, select, file

web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   supportVariables?: boolean
   nodeOutputVars: NodeOutPutVar[],
   availableNodes: Node[],
+  nodeId?: string
 }
 
 const MultipleToolSelector = ({
@@ -40,6 +41,7 @@ const MultipleToolSelector = ({
   supportVariables,
   nodeOutputVars,
   availableNodes,
+  nodeId,
 }: Props) => {
   const { t } = useTranslation()
   const enabledCount = value.filter(item => item.enabled).length
@@ -130,6 +132,7 @@ const MultipleToolSelector = ({
         <>
           <ToolSelector
             supportVariables={supportVariables}
+            nodeId={nodeId}
             nodeOutputVars={nodeOutputVars}
             availableNodes={availableNodes}
             scope={scope}
@@ -152,6 +155,7 @@ const MultipleToolSelector = ({
             <div className='mb-1' key={index}>
               <ToolSelector
                 supportVariables={supportVariables}
+                nodeId={nodeId}
                 nodeOutputVars={nodeOutputVars}
                 availableNodes={availableNodes}
                 scope={scope}

web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -73,6 +73,7 @@ type Props = {
   supportVariables?: boolean
   nodeOutputVars: NodeOutPutVar[],
   availableNodes: Node[],
+  nodeId?: string,
 }
 const ToolSelector: FC<Props> = ({
   value,
@@ -91,6 +92,7 @@ const ToolSelector: FC<Props> = ({
   onPanelShowStateChange,
   nodeOutputVars,
   availableNodes,
+  nodeId = '',
 }) => {
   const { t } = useTranslation()
   const [isShow, onShowChange] = useState(false)
@@ -414,6 +416,7 @@ const ToolSelector: FC<Props> = ({
                         schemas={paramsFormSchemas as any}
                         nodeOutputVars={nodeOutputVars}
                         availableNodes={availableNodes}
+                        nodeId={nodeId}
                       />
                     )}
                   </>

web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx

@@ -6,14 +6,20 @@ import {
 } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
 import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { Node } from 'reactflow'
-import type { NodeOutPutVar, ValueSelector } from '@/app/components/workflow/types'
+import type {
+  NodeOutPutVar,
+  ValueSelector,
+  Var,
+} from '@/app/components/workflow/types'
 import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
 import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { VarType } from '@/app/components/workflow/types'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -22,6 +28,7 @@ type Props = {
   schemas: any[]
   nodeOutputVars: NodeOutPutVar[],
   availableNodes: Node[],
+  nodeId: string
 }
 
 const ReasoningConfigForm: React.FC<Props> = ({
@@ -30,17 +37,15 @@ const ReasoningConfigForm: React.FC<Props> = ({
   schemas,
   nodeOutputVars,
   availableNodes,
+  nodeId,
 }) => {
   const { t } = useTranslation()
   const language = useLanguage()
-  const handleFormChange = (key: string, val: string | boolean) => {
-    onChange({ ...value, [key]: val })
-  }
   const handleAutomatic = (key: string, val: any) => {
     onChange({
       ...value,
       [key]: {
-        ...value[key],
+        value: val ? null : value[key]?.value,
         auto: val ? 1 : 0,
       },
     })
@@ -60,13 +65,13 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const handleNotMixedTypeChange = useCallback((variable: string) => {
     return (varValue: ValueSelector | string, varKindType: VarKindType) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable]
+        const target = draft[variable].value
         if (target) {
           target.type = varKindType
           target.value = varValue
         }
         else {
-          draft[variable] = {
+          draft[variable].value = {
             type: varKindType,
             value: varValue,
           }
@@ -78,12 +83,12 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const handleMixedTypeChange = useCallback((variable: string) => {
     return (itemValue: string) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable]
+        const target = draft[variable].value
         if (target) {
           target.value = itemValue
         }
         else {
-          draft[variable] = {
+          draft[variable].value = {
             type: VarKindType.mixed,
             value: itemValue,
           }
@@ -95,7 +100,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const handleFileChange = useCallback((variable: string) => {
     return (varValue: ValueSelector | string) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
-        draft[variable] = {
+        draft[variable].value = {
           type: VarKindType.variable,
           value: varValue,
         }
@@ -103,7 +108,6 @@ const ReasoningConfigForm: React.FC<Props> = ({
       onChange(newValue)
     }
   }, [value, onChange])
-
   const handleAppChange = useCallback((variable: string) => {
     return (app: {
       app_id: string
@@ -111,7 +115,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
       files?: any[]
     }) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
-        draft[variable] = app as any
+        draft[variable].value = app as any
       })
       onChange(newValue)
     }
@@ -119,8 +123,8 @@ const ReasoningConfigForm: React.FC<Props> = ({
   const handleModelChange = useCallback((variable: string) => {
     return (model: any) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
-        draft[variable] = {
-          ...draft[variable],
+        draft[variable].value = {
+          ...draft[variable].value,
           ...model,
         } as any
       })
@@ -188,33 +192,31 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 placeholderClassName='!leading-[21px]'
               />
             )} */}
-            {/* {(isNumber || isSelect) && (
+            {(isNumber || isSelect) && (
               <VarReferencePicker
-                readonly={readOnly}
+                readonly={false}
                 isShowNodeName
                 nodeId={nodeId}
                 value={varInput?.type === VarKindType.constant ? (varInput?.value ?? '') : (varInput?.value ?? [])}
                 onChange={handleNotMixedTypeChange(variable)}
-                onOpen={handleOpen(index)}
                 defaultVarKindType={varInput?.type || (isNumber ? VarKindType.constant : VarKindType.variable)}
-                isSupportConstantValue={isSupportConstantValue}
-                filterVar={isNumber ? filterVar : undefined}
-                availableVars={isSelect ? availableVars : undefined}
+                isSupportConstantValue
+                filterVar={isNumber ? (varPayload: Var) => varPayload.type === schema._type : undefined}
+                availableVars={isSelect ? nodeOutputVars : undefined}
                 schema={schema}
               />
-            )} */}
-            {/* {isFile && (
+            )}
+            {isFile && (
               <VarReferencePicker
-                readonly={readOnly}
+                readonly={false}
                 isShowNodeName
                 nodeId={nodeId}
                 value={varInput?.value || []}
                 onChange={handleFileChange(variable)}
-                onOpen={handleOpen(index)}
                 defaultVarKindType={VarKindType.variable}
                 filterVar={(varPayload: Var) => varPayload.type === VarType.file || varPayload.type === VarType.arrayFile}
               />
-            )} */}
+            )}
             {isAppSelector && (
               <AppSelector
                 disabled={false}

web/app/components/workflow/nodes/_base/components/agent-strategy.tsx

@@ -36,6 +36,7 @@ export type AgentStrategyProps = {
   onFormValueChange: (value: ToolVarInputs) => void
   nodeOutputVars?: NodeOutPutVar[],
   availableNodes?: Node[],
+  nodeId?: string
 }
 
 type CustomSchema<Type, Field = {}> = Omit<CredentialFormSchema, 'type'> & { type: Type } & Field
@@ -46,7 +47,7 @@ type MultipleToolSelectorSchema = CustomSchema<'array[tools]'>
 type CustomField = ToolSelectorSchema | MultipleToolSelectorSchema
 
 export const AgentStrategy = memo((props: AgentStrategyProps) => {
-  const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes } = props
+  const { strategy, onStrategyChange, formSchema, formValue, onFormValueChange, nodeOutputVars, availableNodes, nodeId } = props
   const { t } = useTranslation()
   const defaultModel = useDefaultModel(ModelTypeEnum.textGeneration)
   const renderI18nObject = useRenderI18nObject()
@@ -155,6 +156,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
           >
             <ToolSelector
               supportVariables
+              nodeId={nodeId || ''}
               nodeOutputVars={nodeOutputVars || []}
               availableNodes={availableNodes || []}
               scope={schema.scope}
@@ -173,6 +175,7 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
         return (
           <MultipleToolSelector
             supportVariables
+            nodeId={nodeId || ''}
             nodeOutputVars={nodeOutputVars || []}
             availableNodes={availableNodes || []}
             scope={schema.scope}

web/app/components/workflow/nodes/agent/panel.tsx

@@ -103,6 +103,7 @@ const AgentPanel: FC<NodePanelProps<AgentNodeType>> = (props) => {
         onFormValueChange={onFormChange}
         nodeOutputVars={availableVars}
         availableNodes={availableNodesWithParent}
+        nodeId={props.id}
       />
     </Field>
     <div>