feat: agent app can choose mcp

web/app/components/app/configuration/config/agent/agent-tools/index.tsx

@@ -30,14 +30,30 @@ import ConfigCredential from '@/app/components/tools/setting/build-in/config-cre
 import { updateBuiltInToolCredential } from '@/service/tools'
 import cn from '@/utils/classnames'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
-import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
 import { canFindTool } from '@/utils'
+import { useAllBuiltInTools, useAllCustomTools, useAllMCPTools, useAllWorkflowTools } from '@/service/use-tools'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
 
 type AgentToolWithMoreInfo = AgentTool & { icon: any; collection?: Collection } | null
 const AgentTools: FC = () => {
   const { t } = useTranslation()
   const [isShowChooseTool, setIsShowChooseTool] = useState(false)
-  const { modelConfig, setModelConfig, collectionList } = useContext(ConfigContext)
+  const { modelConfig, setModelConfig } = useContext(ConfigContext)
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const { data: mcpTools } = useAllMCPTools()
+  const collectionList = useMemo(() => {
+    const allTools = [
+      ...(buildInTools || []),
+      ...(customTools || []),
+      ...(workflowTools || []),
+      ...(mcpTools || []),
+    ]
+    return allTools
+  }, [buildInTools, customTools, workflowTools, mcpTools])
+
   const formattingChangedDispatcher = useFormattingChangedDispatcher()
 
   const [currentTool, setCurrentTool] = useState<AgentToolWithMoreInfo>(null)
@@ -132,7 +148,7 @@ const AgentTools: FC = () => {
                   disabled={false}
                   supportAddCustomTool
                   onSelect={handleSelectTool}
-                  selectedTools={tools}
+                  selectedTools={tools as unknown as ToolValue[]}
                 />
               </>
             )}
@@ -150,7 +166,7 @@ const AgentTools: FC = () => {
               <div className='flex w-0 grow items-center'>
                 {item.isDeleted && <DefaultToolIcon className='h-5 w-5' />}
                 {!item.isDeleted && (
-                  <div className={cn((item.notAuthor || !item.enabled) && 'opacity-50')}>
+                  <div className={cn((item.notAuthor || !item.enabled) && 'shrink-0 opacity-50')}>
                     {typeof item.icon === 'string' && <div className='h-5 w-5 rounded-md bg-cover bg-center' style={{ backgroundImage: `url(${item.icon})` }} />}
                     {typeof item.icon !== 'string' && <AppIcon className='rounded-md' size='xs' icon={item.icon?.content} background={item.icon?.background} />}
                   </div>
@@ -274,8 +290,7 @@ const AgentTools: FC = () => {
         <SettingBuiltInTool
           toolName={currentTool?.tool_name as string}
           setting={currentTool?.tool_parameters}
-          collection={currentTool?.collection as Collection}
+          collection={currentTool?.collection as ToolWithProvider}
-          isBuiltIn={currentTool?.collection?.type === CollectionType.builtIn}
           isModel={currentTool?.collection?.type === CollectionType.model}
           onSave={handleToolSettingChange}
           onHide={() => setIsShowSettingTool(false)}

web/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool.tsx

@@ -24,10 +24,11 @@ import { fetchBuiltInToolList, fetchCustomToolList, fetchModelToolList, fetchWor
 import I18n from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
 import cn from '@/utils/classnames'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
 
 type Props = {
   showBackButton?: boolean
-  collection: Collection
+  collection: Collection | ToolWithProvider
   isBuiltIn?: boolean
   isModel?: boolean
   toolName: string
@@ -51,9 +52,10 @@ const SettingBuiltInTool: FC<Props> = ({
   const { locale } = useContext(I18n)
   const language = getLanguage(locale)
   const { t } = useTranslation()
-
+  const passedTools = (collection as ToolWithProvider).tools
-  const [isLoading, setIsLoading] = useState(true)
+  const hasPassedTools = passedTools?.length > 0
-  const [tools, setTools] = useState<Tool[]>([])
+  const [isLoading, setIsLoading] = useState(!hasPassedTools)
+  const [tools, setTools] = useState<Tool[]>(hasPassedTools ? passedTools : [])
   const currTool = tools.find(tool => tool.name === toolName)
   const formSchemas = currTool ? toolParametersToFormSchemas(currTool.parameters) : []
   const infoSchemas = formSchemas.filter(item => item.form === 'llm')
@@ -63,7 +65,7 @@ const SettingBuiltInTool: FC<Props> = ({
   const [currType, setCurrType] = useState('info')
   const isInfoActive = currType === 'info'
   useEffect(() => {
-    if (!collection)
+    if (!collection || hasPassedTools)
       return
 
     (async () => {