support variable for string

web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx

@@ -22,6 +22,10 @@ import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-sele
 import MultipleToolSelector from '@/app/components/plugins/plugin-detail-panel/multiple-tool-selector'
 import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
 import RadioE from '@/app/components/base/radio/ui'
+import type {
+  NodeOutPutVar,
+} from '@/app/components/workflow/types'
+import type { Node } from 'reactflow'
 
 type FormProps<
   CustomFormSchema extends Omit<CredentialFormSchema, 'type'> & { type: string } = never,
@@ -47,6 +51,9 @@ type FormProps<
   ) => ReactNode
   // If return falsy value, this field will fallback to default render
   override?: [Array<FormTypeEnum>, (formSchema: CredentialFormSchema, props: Omit<FormProps<CustomFormSchema>, 'override' | 'customRenderField'>) => ReactNode]
+  nodeId?: string
+  nodeOutputVars?: NodeOutPutVar[],
+  availableNodes?: Node[],
 }
 
 function Form<
@@ -69,6 +76,9 @@ function Form<
   fieldMoreInfo,
   customRenderField,
   override,
+  nodeId,
+  nodeOutputVars,
+  availableNodes,
 }: FormProps<CustomFormSchema>) {
   const language = useLanguage()
   const [changeKey, setChangeKey] = useState('')
@@ -326,8 +336,9 @@ function Form<
           </div>
           <ToolSelector
             scope={scope}
-            nodeOutputVars={[]}
-            availableNodes={[]}
+            nodeId={nodeId}
+            nodeOutputVars={nodeOutputVars || []}
+            availableNodes={availableNodes || []}
             disabled={readonly}
             value={value[variable]}
             // selectedTools={value[variable] ? [value[variable]] : []}
@@ -353,8 +364,9 @@ function Form<
         <div key={variable} className={cn(itemClassName, 'py-3')}>
           <MultipleToolSelector
             disabled={readonly}
-            nodeOutputVars={[]}
-            availableNodes={[]}
+            nodeId={nodeId}
+            nodeOutputVars={nodeOutputVars || []}
+            availableNodes={availableNodes || []}
             scope={scope}
             label={label[language] || label.en_US}
             required={required}

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

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import produce from 'immer'
 import {
@@ -36,7 +36,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
   onChange,
   schemas,
   nodeOutputVars,
-  availableNodes,
+  // availableNodes,
   nodeId,
 }) => {
   const { t } = useTranslation()
@@ -51,52 +51,52 @@ const ReasoningConfigForm: React.FC<Props> = ({
     })
   }
 
-  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
-  const handleInputFocus = useCallback((variable: string) => {
-    return (value: boolean) => {
-      setInputsIsFocus((prev) => {
-        return {
-          ...prev,
-          [variable]: value,
-        }
-      })
-    }
-  }, [])
-  const handleNotMixedTypeChange = useCallback((variable: string) => {
+  // const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
+  // const handleInputFocus = useCallback((variable: string) => {
+  //   return (value: boolean) => {
+  //     setInputsIsFocus((prev) => {
+  //       return {
+  //         ...prev,
+  //         [variable]: value,
+  //       }
+  //     })
+  //   }
+  // }, [])
+  const handleNotMixedTypeChange = useCallback((variable: string, toString = false) => {
     return (varValue: ValueSelector | string, varKindType: VarKindType) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
         const target = draft[variable].value
         if (target) {
           target.type = varKindType
-          target.value = varValue
+          target.value = toString ? `${varValue}` : varValue
         }
         else {
           draft[variable].value = {
             type: varKindType,
-            value: varValue,
-          }
-        }
-      })
-      onChange(newValue)
-    }
-  }, [value, onChange])
-  const handleMixedTypeChange = useCallback((variable: string) => {
-    return (itemValue: string) => {
-      const newValue = produce(value, (draft: ToolVarInputs) => {
-        const target = draft[variable].value
-        if (target) {
-          target.value = itemValue
-        }
-        else {
-          draft[variable].value = {
-            type: VarKindType.mixed,
-            value: itemValue,
+            value: toString ? `${varValue}` : varValue,
           }
         }
       })
       onChange(newValue)
     }
   }, [value, onChange])
+  // const handleMixedTypeChange = useCallback((variable: string) => {
+  //   return (itemValue: string) => {
+  //     const newValue = produce(value, (draft: ToolVarInputs) => {
+  //       const target = draft[variable].value
+  //       if (target) {
+  //         target.value = itemValue
+  //       }
+  //       else {
+  //         draft[variable].value = {
+  //           type: VarKindType.mixed,
+  //           value: itemValue,
+  //         }
+  //       }
+  //     })
+  //     onChange(newValue)
+  //   }
+  // }, [value, onChange])
   const handleFileChange = useCallback((variable: string) => {
     return (varValue: ValueSelector | string) => {
       const newValue = produce(value, (draft: ToolVarInputs) => {
@@ -192,8 +192,21 @@ const ReasoningConfigForm: React.FC<Props> = ({
                 placeholderClassName='!leading-[21px]'
               />
             )} */}
+            {isString && (
+              <VarReferencePicker
+                zIndex={1001}
+                readonly={false}
+                isShowNodeName
+                nodeId={nodeId}
+                value={varInput?.value || []}
+                onChange={handleNotMixedTypeChange(variable, true)}
+                defaultVarKindType={VarKindType.variable}
+                filterVar={(varPayload: Var) => varPayload.type === VarType.number || varPayload.type === VarType.secret || varPayload.type === VarType.string}
+              />
+            )}
             {(isNumber || isSelect) && (
               <VarReferencePicker
+                zIndex={1001}
                 readonly={false}
                 isShowNodeName
                 nodeId={nodeId}
@@ -208,6 +221,7 @@ const ReasoningConfigForm: React.FC<Props> = ({
             )}
             {isFile && (
               <VarReferencePicker
+                zIndex={1001}
                 readonly={false}
                 isShowNodeName
                 nodeId={nodeId}

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

@@ -156,9 +156,9 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
           >
             <ToolSelector
               supportVariables
-              nodeId={nodeId || ''}
-              nodeOutputVars={nodeOutputVars || []}
-              availableNodes={availableNodes || []}
+              nodeId={props.nodeId || ''}
+              nodeOutputVars={props.nodeOutputVars || []}
+              availableNodes={props.availableNodes || []}
               scope={schema.scope}
               value={value}
               onSelect={item => onChange(item)}
@@ -175,9 +175,9 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
         return (
           <MultipleToolSelector
             supportVariables
-            nodeId={nodeId || ''}
-            nodeOutputVars={nodeOutputVars || []}
-            availableNodes={availableNodes || []}
+            nodeId={props.nodeId || ''}
+            nodeOutputVars={props.nodeOutputVars || []}
+            availableNodes={props.availableNodes || []}
             scope={schema.scope}
             value={value || []}
             label={renderI18nObject(schema.label)}
@@ -208,6 +208,9 @@ export const AgentStrategy = memo((props: AgentStrategyProps) => {
             fieldLabelClassName='uppercase'
             customRenderField={renderField}
             override={override}
+            nodeId={nodeId}
+            nodeOutputVars={nodeOutputVars || []}
+            availableNodes={availableNodes || []}
           />
         </div>
         : <ListEmpty

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

@@ -64,6 +64,7 @@ type Props = {
   placeholder?: string
   minWidth?: number
   popupFor?: 'assigned' | 'toAssigned'
+  zIndex?: number
 }
 
 const VarReferencePicker: FC<Props> = ({
@@ -90,6 +91,7 @@ const VarReferencePicker: FC<Props> = ({
   placeholder,
   minWidth,
   popupFor,
+  zIndex,
 }) => {
   const { t } = useTranslation()
   const store = useStoreApi()
@@ -386,7 +388,7 @@ const VarReferencePicker: FC<Props> = ({
           </>
         </WrapElem>
         <PortalToFollowElemContent style={{
-          zIndex: 100,
+          zIndex: zIndex || 100,
         }} className='mt-1'>
           {!isConstant && (
             <VarReferencePopup