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/tools/add-tool-modal/index.tsx

@@ -0,0 +1,235 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import produce from 'immer'
+import cn from 'classnames'
+import { useMount } from 'ahooks'
+import type { Collection, CustomCollectionBackend, Tool } from '../types'
+import Type from './type'
+import Category from './category'
+import Tools from './tools'
+import I18n from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import Drawer from '@/app/components/base/drawer'
+import Button from '@/app/components/base/button'
+import Loading from '@/app/components/base/loading'
+import SearchInput from '@/app/components/base/search-input'
+import { Plus, XClose } from '@/app/components/base/icons/src/vender/line/general'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import {
+  createCustomCollection,
+  fetchAllBuiltInTools,
+  fetchAllCustomTools,
+  fetchAllWorkflowTools,
+  removeBuiltInToolCredential,
+  updateBuiltInToolCredential,
+} from '@/service/tools'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import Toast from '@/app/components/base/toast'
+import ConfigContext from '@/context/debug-configuration'
+import type { ModelConfig } from '@/models/debug'
+
+type Props = {
+  onHide: () => void
+}
+// Add and Edit
+const AddToolModal: FC<Props> = ({
+  onHide,
+}) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const language = getLanguage(locale)
+  const [currentType, setCurrentType] = useState('builtin')
+  const [currentCategory, setCurrentCategory] = useState('')
+  const [keywords, setKeywords] = useState<string>('')
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+  }
+  const [toolList, setToolList] = useState<ToolWithProvider[]>([])
+  const [listLoading, setListLoading] = useState(true)
+  const getAllTools = async () => {
+    setListLoading(true)
+    const buildInTools = await fetchAllBuiltInTools()
+    const customTools = await fetchAllCustomTools()
+    const workflowTools = await fetchAllWorkflowTools()
+    const mergedToolList = [
+      ...buildInTools,
+      ...customTools,
+      ...workflowTools.filter((toolWithProvider) => {
+        return !toolWithProvider.tools.some((tool) => {
+          return !!tool.parameters.find(item => item.name === '__image')
+        })
+      }),
+    ]
+    setToolList(mergedToolList)
+    setListLoading(false)
+  }
+  const filteredList = useMemo(() => {
+    return toolList.filter((toolWithProvider) => {
+      if (currentType === 'all')
+        return true
+      else
+        return toolWithProvider.type === currentType
+    }).filter((toolWithProvider) => {
+      if (!currentCategory)
+        return true
+      else
+        return toolWithProvider.labels.includes(currentCategory)
+    }).filter((toolWithProvider) => {
+      return toolWithProvider.tools.some((tool) => {
+        return tool.label[language].toLowerCase().includes(keywords.toLowerCase())
+      })
+    })
+  }, [currentType, currentCategory, toolList, keywords, language])
+
+  const {
+    modelConfig,
+    setModelConfig,
+  } = useContext(ConfigContext)
+
+  const [isShowEditCollectionToolModal, setIsShowEditCustomCollectionModal] = useState(false)
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setIsShowEditCustomCollectionModal(false)
+    getAllTools()
+  }
+  const [showSettingAuth, setShowSettingAuth] = useState(false)
+  const [collection, setCollection] = useState<Collection>()
+  const toolSelectHandle = (collection: Collection, tool: Tool) => {
+    const parameters: Record<string, string> = {}
+    if (tool.parameters) {
+      tool.parameters.forEach((item) => {
+        parameters[item.name] = ''
+      })
+    }
+
+    const nexModelConfig = produce(modelConfig, (draft: ModelConfig) => {
+      draft.agentConfig.tools.push({
+        provider_id: collection.id || collection.name,
+        provider_type: collection.type,
+        provider_name: collection.name,
+        tool_name: tool.name,
+        tool_label: tool.label[locale] || tool.label[locale.replaceAll('-', '_')],
+        tool_parameters: parameters,
+        enabled: true,
+      })
+    })
+    setModelConfig(nexModelConfig)
+  }
+  const authSelectHandle = (provider: Collection) => {
+    setCollection(provider)
+    setShowSettingAuth(true)
+  }
+  const updateBuiltinAuth = async (value: Record<string, any>) => {
+    if (!collection)
+      return
+    await updateBuiltInToolCredential(collection.name, value)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    await getAllTools()
+    setShowSettingAuth(false)
+  }
+  const removeBuiltinAuth = async () => {
+    if (!collection)
+      return
+    await removeBuiltInToolCredential(collection.name)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    await getAllTools()
+    setShowSettingAuth(false)
+  }
+
+  useMount(() => {
+    getAllTools()
+  })
+
+  return (
+    <>
+      <Drawer
+        isOpen
+        mask
+        clickOutsideNotOpen
+        onClose={onHide}
+        footer={null}
+        panelClassname={cn('mt-16 mx-2 sm:mr-2 mb-3 !p-0 rounded-xl', 'mt-2 !w-[640px]', '!max-w-[640px]')}
+      >
+        <div
+          className='w-full flex bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl'
+          style={{
+            height: 'calc(100vh - 16px)',
+          }}
+        >
+          <div className='relative shrink-0 w-[200px] pb-3 bg-gray-100 rounded-l-xl border-r-[0.5px] border-black/2 overflow-y-auto'>
+            <div className='sticky top-0 left-0 right-0'>
+              <div className='sticky top-0 left-0 right-0 px-5 py-3 text-md font-semibold text-gray-900'>{t('tools.addTool')}</div>
+              <div className='px-3 pt-2 pb-4'>
+                <Button type='primary' className='w-[176px] text-[13px] leading-[18px] font-medium' onClick={() => setIsShowEditCustomCollectionModal(true)}>
+                  <Plus className='w-4 h-4 mr-1'/>
+                  {t('tools.createCustomTool')}
+                </Button>
+              </div>
+            </div>
+            <div className='px-2 py-1'>
+              <Type value={currentType} onSelect={setCurrentType}/>
+              <Category value={currentCategory} onSelect={setCurrentCategory}/>
+            </div>
+          </div>
+          <div className='relative grow bg-white rounded-r-xl overflow-y-auto'>
+            <div className='z-10 sticky top-0 left-0 right-0 p-2 flex items-center gap-1 bg-white'>
+              <div className='grow'>
+                <SearchInput className='w-full' value={keywords} onChange={handleKeywordsChange} />
+              </div>
+              <div className='ml-2 mr-1 w-[1px] h-4 bg-gray-200'></div>
+              <div className='p-2 cursor-pointer' onClick={onHide}>
+                <XClose className='w-4 h-4 text-gray-500' />
+              </div>
+            </div>
+            {listLoading && (
+              <div className='flex h-[200px] items-center justify-center bg-white'>
+                <Loading />
+              </div>
+            )}
+            {!listLoading && (
+              <Tools
+                showWorkflowEmpty={currentType === 'workflow'}
+                tools={filteredList}
+                addedTools={(modelConfig?.agentConfig?.tools as any) || []}
+                onSelect={toolSelectHandle}
+                onAuthSetup={authSelectHandle}
+              />
+            )}
+          </div>
+        </div>
+      </Drawer>
+      {isShowEditCollectionToolModal && (
+        <EditCustomToolModal
+          positionLeft
+          payload={null}
+          onHide={() => setIsShowEditCustomCollectionModal(false)}
+          onAdd={doCreateCustomToolCollection}
+        />
+      )}
+      {showSettingAuth && collection && (
+        <ConfigCredential
+          collection={collection}
+          onCancel={() => setShowSettingAuth(false)}
+          onSaved={updateBuiltinAuth}
+          onRemove={removeBuiltinAuth}
+        />
+      )}
+    </>
+
+  )
+}
+export default React.memo(AddToolModal)