feat: create tool model

web/app/components/workflow/block-selector/all-tools.tsx

@@ -26,6 +26,8 @@ type AllToolsProps = {
   workflowTools: ToolWithProvider[]
   onSelect: OnSelectBlock
   supportAddCustomTool?: boolean
+  onAddedCustomTool?: () => void
+  onShowAddCustomCollectionModal?: () => void
 }
 const AllTools = ({
   className,
@@ -35,6 +37,7 @@ const AllTools = ({
   workflowTools,
   customTools,
   supportAddCustomTool,
+  onShowAddCustomCollectionModal,
 }: AllToolsProps) => {
   const language = useGetLanguage()
   const tabs = useToolTabs()
@@ -86,7 +89,10 @@ const AllTools = ({
         {supportAddCustomTool && (
           <div className='flex items-center'>
             <div className='mr-1.5 w-px h-3.5  bg-divider-regular'></div>
-            <ActionButton className='bg-components-button-primary-bg hover:bg-components-button-primary-bg text-components-button-primary-text hover:text-components-button-primary-text'>
+            <ActionButton
+              className='bg-components-button-primary-bg hover:bg-components-button-primary-bg text-components-button-primary-text hover:text-components-button-primary-text'
+              onClick={onShowAddCustomCollectionModal}
+            >
               <RiAddLine className='w-4 h-4' />
             </ActionButton>
           </div>

web/app/components/workflow/block-selector/tool-picker.tsx

@@ -21,6 +21,13 @@ import {
 import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types'
 import SearchBox from '@/app/components/plugins/marketplace/search-box'
 import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal/modal'
+import {
+  createCustomCollection,
+} from '@/service/tools'
+import type { CustomCollectionBackend } from '@/app/components/tools/types'
+import Toast from '@/app/components/base/toast'
 
 type Props = {
   disabled: boolean
@@ -61,6 +68,11 @@ const ToolPicker: FC<Props> = ({
     })()
   }, [])
 
+  const handleAddedCustomTool = async () => {
+    const customTools = await fetchAllCustomTools()
+    setCustomTools(customTools)
+  }
+
   const handleTriggerClick = () => {
     if (disabled) return
     onShowChange(true)
@@ -70,6 +82,32 @@ const ToolPicker: FC<Props> = ({
     onSelect(tool!)
   }
 
+  const [isShowEditCollectionToolModal, {
+    setFalse: hideEditCustomCollectionModal,
+    setTrue: showEditCustomCollectionModal,
+  }] = useBoolean(false)
+
+  const doCreateCustomToolCollection = async (data: CustomCollectionBackend) => {
+    await createCustomCollection(data)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    hideEditCustomCollectionModal()
+    handleAddedCustomTool()
+  }
+
+  if (isShowEditCollectionToolModal) {
+    return (
+      <EditCustomToolModal
+        positionLeft
+        payload={null}
+        onHide={hideEditCustomCollectionModal}
+        onAdd={doCreateCustomToolCollection}
+      />
+    )
+  }
+
   return (
     <PortalToFollowElem
       placement={placement}
@@ -84,6 +122,7 @@ const ToolPicker: FC<Props> = ({
       </PortalToFollowElemTrigger>
 
       <PortalToFollowElemContent className='z-[1000]'>
+        { }
         <div className="relative w-[320px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
           <div className='p-2 pb-1'>
             <SearchBox
@@ -103,6 +142,8 @@ const ToolPicker: FC<Props> = ({
             customTools={customTools}
             workflowTools={workflowTools}
             supportAddCustomTool={supportAddCustomTool}
+            onAddedCustomTool={handleAddedCustomTool}
+            onShowAddCustomCollectionModal={showEditCustomCollectionModal}
           />
         </div>
       </PortalToFollowElemContent>