From 23bf0a6812f9082898df867ea06f470923bd50ac Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 26 Dec 2024 14:28:31 +0800
Subject: [PATCH] tool selector support scope

---
 .../model-provider-page/model-modal/Form.tsx  |  6 ++-
 .../plugins/plugin-detail-panel/index.tsx     | 11 ++++++
 .../tool-selector/index.tsx                   |  7 +++-
 .../workflow/block-selector/tool-picker.tsx   | 39 +++++++++++++++++--
 4 files changed, 57 insertions(+), 6 deletions(-)

diff --git a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
index fdb7aece0f..5bd79a5cef 100644
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@@ -275,7 +275,10 @@ function Form<
 
     if (formSchema.type === FormTypeEnum.toolSelector) {
       const {
-        variable, label, required,
+        variable,
+        label,
+        required,
+        scope,
       } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
 
       return (
@@ -288,6 +291,7 @@ function Form<
             {tooltipContent}
           </div>
           <ToolSelector
+            scope={scope}
             disabled={readonly}
             value={value[variable]}
             onSelect={item => handleFormChange(variable, item as any)} />
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 4d20c0877d..c977eeeef2 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -7,6 +7,7 @@ import ActionList from './action-list'
 import ModelList from './model-list'
 import AgentStrategyList from './agent-strategy-list'
 import Drawer from '@/app/components/base/drawer'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
 
@@ -27,6 +28,10 @@ const PluginDetailPanel: FC<Props> = ({
     onUpdate()
   }
 
+  const testChange = (val: any) => {
+    console.log('tool change', val)
+  }
+
   if (!detail)
     return null
 
@@ -52,6 +57,12 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
+            <div>
+              <ToolSelector
+                value={undefined}
+                onSelect={item => testChange(item)}
+              />
+            </div>
           </div>
         </>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index eab0dd94d2..4b95e13727 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -43,13 +43,15 @@ type Props = {
     tool_name: string
   }) => void
   supportAddCustomTool?: boolean
+  scope?: string
 }
 const ToolSelector: FC<Props> = ({
   value,
   disabled,
-  placement = 'bottom',
+  placement = 'left',
   offset = 4,
   onSelect,
+  scope,
 }) => {
   const { t } = useTranslation()
   const [isShow, onShowChange] = useState(false)
@@ -73,6 +75,8 @@ const ToolSelector: FC<Props> = ({
     const toolValue = {
       provider: tool.provider_id,
       tool_name: tool.tool_name,
+      description: '',
+      parameters: {},
     }
     onSelect(toolValue)
     setIsShowChooseTool(false)
@@ -132,6 +136,7 @@ const ToolSelector: FC<Props> = ({
                 disabled={false}
                 supportAddCustomTool
                 onSelect={handleSelectTool}
+                scope={scope}
               />
             </div>
             {/* authorization panel */}
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index 60de09d3e6..8cab803be0 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/web/app/components/workflow/block-selector/tool-picker.tsx
@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import {
   PortalToFollowElem,
   PortalToFollowElemContent,
@@ -34,6 +34,7 @@ type Props = {
   onShowChange: (isShow: boolean) => void
   onSelect: (tool: ToolDefaultValue) => void
   supportAddCustomTool?: boolean
+  scope?: string
 }
 
 const ToolPicker: FC<Props> = ({
@@ -45,6 +46,7 @@ const ToolPicker: FC<Props> = ({
   onShowChange,
   onSelect,
   supportAddCustomTool,
+  scope = 'all',
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
@@ -55,6 +57,35 @@ const ToolPicker: FC<Props> = ({
   const invalidateCustomTools = useInvalidateAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
 
+  const { builtinToolList, customToolList, workflowToolList } = useMemo(() => {
+    if (scope === 'plugins') {
+      return {
+        builtinToolList: buildInTools,
+        customToolList: [],
+        workflowToolList: [],
+      }
+    }
+    if (scope === 'custom') {
+      return {
+        builtinToolList: [],
+        customToolList: customTools,
+        workflowToolList: [],
+      }
+    }
+    if (scope === 'workflow') {
+      return {
+        builtinToolList: [],
+        customToolList: [],
+        workflowToolList: workflowTools,
+      }
+    }
+    return {
+      builtinToolList: buildInTools,
+      customToolList: customTools,
+      workflowToolList: workflowTools,
+    }
+  }, [scope, buildInTools, customTools, workflowTools])
+
   const handleAddedCustomTool = invalidateCustomTools
 
   const handleTriggerClick = () => {
@@ -122,9 +153,9 @@ const ToolPicker: FC<Props> = ({
             tags={tags}
             searchText={searchText}
             onSelect={handleSelect}
-            buildInTools={buildInTools || []}
-            customTools={customTools || []}
-            workflowTools={workflowTools || []}
+            buildInTools={builtinToolList || []}
+            customTools={customToolList || []}
+            workflowTools={workflowToolList || []}
             supportAddCustomTool={supportAddCustomTool}
             onAddedCustomTool={handleAddedCustomTool}
             onShowAddCustomCollectionModal={showEditCustomCollectionModal}