feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

web/app/components/workflow/nodes/tool/components/input-var-list.tsx

@@ -36,17 +36,6 @@ const InputVarList: FC<Props> = ({
   filterVar,
 }) => {
   const language = useLanguage()
-
-  // const valueList = (() => {
-  //   const list = []
-  //   Object.keys(value).forEach((key) => {
-  //     list.push({
-  //       variable: key,
-  //       ...value[key],
-  //     })
-  //   })
-  // })()
-
   const { t } = useTranslation()
   const { availableVars, availableNodes } = useAvailableVarList(nodeId, {
     onlyLeafNodeVar: false,
@@ -54,6 +43,14 @@ const InputVarList: FC<Props> = ({
       return [VarType.string, VarType.number].includes(varPayload.type)
     },
   })
+  const paramType = (type: string) => {
+    if (type === FormTypeEnum.textNumber)
+      return 'Number'
+    else if (type === FormTypeEnum.files)
+      return 'Files'
+    else
+      return 'String'
+  }
 
   const handleNotMixedTypeChange = useCallback((variable: string) => {
     return (varValue: ValueSelector | string, varKindType: VarKindType) => {
@@ -125,16 +122,18 @@ const InputVarList: FC<Props> = ({
           tooltip,
         }, index) => {
           const varInput = value[variable]
-          const isString = type !== FormTypeEnum.textNumber
+          const isNumber = type === FormTypeEnum.textNumber
+          const isFile = type === FormTypeEnum.files
+          const isString = type !== FormTypeEnum.textNumber && type !== FormTypeEnum.files
           return (
             <div key={variable} className='space-y-1'>
               <div className='flex items-center h-[18px] space-x-2'>
                 <span className='text-[13px] font-medium text-gray-900'>{label[language] || label.en_US}</span>
-                <span className='text-xs font-normal text-gray-500'>{!isString ? 'Number' : 'String'}</span>
+                <span className='text-xs font-normal text-gray-500'>{paramType(type)}</span>
                 {required && <span className='leading-[18px] text-xs font-normal text-[#EC4A0A]'>Required</span>}
               </div>
-              {isString
-                ? (<Input
+              {isString && (
+                <Input
                   className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
                   value={varInput?.value as string || ''}
                   onChange={handleMixedTypeChange(variable)}
@@ -144,21 +143,33 @@ const InputVarList: FC<Props> = ({
                   onFocusChange={handleInputFocus(variable)}
                   placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
                   placeholderClassName='!leading-[21px]'
-                />)
-                : (
-                  <VarReferencePicker
-                    readonly={readOnly}
-                    isShowNodeName
-                    nodeId={nodeId}
-                    value={varInput?.type === VarKindType.constant ? (varInput?.value || '') : (varInput?.value || [])}
-                    onChange={handleNotMixedTypeChange(variable)}
-                    onOpen={handleOpen(index)}
-                    isSupportConstantValue={isSupportConstantValue}
-                    defaultVarKindType={varInput?.type}
-                    filterVar={filterVar}
-                  />
-                )}
-
+                />
+              )}
+              {isNumber && (
+                <VarReferencePicker
+                  readonly={readOnly}
+                  isShowNodeName
+                  nodeId={nodeId}
+                  value={varInput?.type === VarKindType.constant ? (varInput?.value || '') : (varInput?.value || [])}
+                  onChange={handleNotMixedTypeChange(variable)}
+                  onOpen={handleOpen(index)}
+                  isSupportConstantValue={isSupportConstantValue}
+                  defaultVarKindType={varInput?.type}
+                  filterVar={filterVar}
+                />
+              )}
+              {isFile && (
+                <VarReferencePicker
+                  readonly={readOnly}
+                  isShowNodeName
+                  nodeId={nodeId}
+                  value={varInput?.type === VarKindType.constant ? (varInput?.value || '') : (varInput?.value || [])}
+                  onChange={handleNotMixedTypeChange(variable)}
+                  onOpen={handleOpen(index)}
+                  defaultVarKindType={VarKindType.variable}
+                  filterVar={(varPayload: Var) => varPayload.type === VarType.arrayFile}
+                />
+              )}
               {tooltip && <div className='leading-[18px] text-xs font-normal text-gray-600'>{tooltip[language] || tooltip.en_US}</div>}
             </div>
           )

web/app/components/workflow/nodes/tool/types.ts

@@ -1,3 +1,4 @@
+import type { CollectionType } from '@/app/components/tools/types'
 import type { CommonNodeType, ValueSelector } from '@/app/components/workflow/types'
 
 export enum VarType {
@@ -13,7 +14,7 @@ export type ToolVarInputs = Record<string, {
 
 export type ToolNodeType = CommonNodeType & {
   provider_id: string
-  provider_type: 'builtin'
+  provider_type: CollectionType
   provider_name: string
   tool_name: string
   tool_label: string

web/app/components/workflow/nodes/tool/use-config.ts

@@ -34,7 +34,20 @@ const useConfig = (id: string, payload: ToolNodeType) => {
   const isBuiltIn = provider_type === CollectionType.builtIn
   const buildInTools = useStore(s => s.buildInTools)
   const customTools = useStore(s => s.customTools)
-  const currentTools = isBuiltIn ? buildInTools : customTools
+  const workflowTools = useStore(s => s.workflowTools)
+
+  const currentTools = (() => {
+    switch (provider_type) {
+      case CollectionType.builtIn:
+        return buildInTools
+      case CollectionType.custom:
+        return customTools
+      case CollectionType.workflow:
+        return workflowTools
+      default:
+        return []
+    }
+  })()
   const currCollection = currentTools.find(item => item.id === provider_id)
 
   // Auth