feat: Introduce RAG tool recommendations and refactor related components for improved plugin management (#27259)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/service/use-plugins.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import type {
   FormOption,
   ModelProvider,
@@ -39,7 +39,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query'
-import { useInvalidateAllBuiltInTools, useInvalidateRAGRecommendedPlugins } from './use-tools'
+import { useInvalidateAllBuiltInTools } from './use-tools'
 import useReferenceSetting from '@/app/components/plugins/plugin-page/use-reference-setting'
 import { uninstallPlugin } from '@/service/plugins'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
@@ -135,14 +135,12 @@ export const useInstalledLatestVersion = (pluginIds: string[]) => {
 export const useInvalidateInstalledPluginList = () => {
   const queryClient = useQueryClient()
   const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools()
-  const invalidateRAGRecommendedPlugins = useInvalidateRAGRecommendedPlugins()
   return () => {
     queryClient.invalidateQueries(
       {
         queryKey: useInstalledPluginListKey,
       })
     invalidateAllBuiltInTools()
-    invalidateRAGRecommendedPlugins()
   }
 }
 
@@ -489,6 +487,7 @@ export const useFetchPluginsInMarketPlaceByInfo = (infos: Record<string, any>[])
 
 const usePluginTaskListKey = [NAME_SPACE, 'pluginTaskList']
 export const usePluginTaskList = (category?: PluginType) => {
+  const [initialized, setInitialized] = useState(false)
   const {
     canManagement,
   } = useReferenceSetting()
@@ -512,7 +511,8 @@ export const usePluginTaskList = (category?: PluginType) => {
 
   useEffect(() => {
     // After first fetch, refresh plugin list each time all tasks are done
-    if (!isRefetching) {
+    // Skip initialization period, because the query cache is not updated yet
+    if (initialized && !isRefetching) {
       const lastData = cloneDeep(data)
       const taskDone = lastData?.tasks.every(task => task.status === TaskStatus.success || task.status === TaskStatus.failed)
       const taskAllFailed = lastData?.tasks.every(task => task.status === TaskStatus.failed)
@@ -523,6 +523,10 @@ export const usePluginTaskList = (category?: PluginType) => {
     }
   }, [isRefetching])
 
+  useEffect(() => {
+    setInitialized(true)
+  }, [])
+
   const handleRefetch = useCallback(() => {
     refetch()
   }, [refetch])

web/service/use-tools.ts

@@ -4,9 +4,11 @@ import type {
   MCPServerDetail,
   Tool,
 } from '@/app/components/tools/types'
+import { CollectionType } from '@/app/components/tools/types'
 import type { RAGRecommendedPlugins, ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
 import { useInvalid } from './use-base'
+import type { QueryKey } from '@tanstack/react-query'
 import {
   useMutation,
   useQuery,
@@ -76,6 +78,16 @@ export const useInvalidateAllMCPTools = () => {
   return useInvalid(useAllMCPToolsKey)
 }
 
+const useInvalidToolsKeyMap: Record<string, QueryKey> = {
+  [CollectionType.builtIn]: useAllBuiltInToolsKey,
+  [CollectionType.custom]: useAllCustomToolsKey,
+  [CollectionType.workflow]: useAllWorkflowToolsKey,
+  [CollectionType.mcp]: useAllMCPToolsKey,
+}
+export const useInvalidToolsByType = (type: CollectionType | string) => {
+  return useInvalid(useInvalidToolsKeyMap[type])
+}
+
 export const useCreateMCP = () => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'create-mcp'],