feat(rag): integrate RAG recommended plugins into workflow component

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

@@ -26,6 +26,7 @@ import { PluginType } from '../../plugins/types'
 import { useMarketplacePlugins } from '../../plugins/marketplace/hooks'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 import RAGToolSuggestions from './rag-tool-suggestions'
+import { useRAGRecommendedPlugins } from '@/service/use-tools'
 
 type AllToolsProps = {
   className?: string
@@ -117,6 +118,10 @@ const AllTools = ({
   const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab)
 
   const isShowRAGRecommendations = isInRAGPipeline && activeTab === ToolTypeEnum.All && !searchText
+  const { data: ragRecommendedPlugins = [] } = useRAGRecommendedPlugins(isShowRAGRecommendations)
+  const recommendedPlugins = useMemo(() => {
+    return ragRecommendedPlugins.filter(plugin => !plugin.installed)
+  }, [ragRecommendedPlugins])
 
   return (
     <div className={cn('min-w-[400px] max-w-[500px]', className)}>
@@ -147,9 +152,9 @@ const AllTools = ({
         className='max-h-[464px] overflow-y-auto'
         onScroll={pluginRef.current?.handleScroll}
       >
-        {isShowRAGRecommendations && (
+        {recommendedPlugins.length > 0 && (
           <RAGToolSuggestions
-            tools={[]}
+            tools={recommendedPlugins}
             viewType={isSupportGroupView ? activeView : ViewType.flat}
             onSelect={onSelect}
             onTagsChange={onTagsChange}

web/app/components/workflow/block-selector/rag-tool-suggestions.tsx

@@ -2,8 +2,8 @@ import type { Dispatch, SetStateAction } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import type { OnSelectBlock, ToolWithProvider } from '../types'
-// import Tools from './tools'
-// import { ToolTypeEnum } from './types'
+import Tools from './tools'
+import { ToolTypeEnum } from './types'
 import type { ViewType } from './view-type-select'
 import { RiMoreLine } from '@remixicon/react'
 
@@ -15,15 +15,19 @@ type RAGToolSuggestionsProps = {
 }
 
 const RAGToolSuggestions: React.FC<RAGToolSuggestionsProps> = ({
-  // tools,
-  // viewType,
-  // onSelect,
+  tools,
+  viewType,
+  onSelect,
   onTagsChange,
 }) => {
   const { t } = useTranslation()
 
   const loadMore = useCallback(() => {
-    onTagsChange(prev => [...prev, 'rag'])
+    onTagsChange((prev) => {
+      if (prev.includes('rag'))
+        return prev
+      return [...prev, 'rag']
+    })
   }, [onTagsChange])
 
   return (
@@ -31,7 +35,7 @@ const RAGToolSuggestions: React.FC<RAGToolSuggestionsProps> = ({
       <div className='system-xs-medium px-3 pb-0.5 pt-1 text-text-tertiary'>
         {t('pipeline.ragToolSuggestions.title')}
       </div>
-      {/* <Tools
+      <Tools
         className='p-0'
         tools={tools}
         onSelect={onSelect}
@@ -39,7 +43,7 @@ const RAGToolSuggestions: React.FC<RAGToolSuggestionsProps> = ({
         toolType={ToolTypeEnum.All}
         viewType={viewType}
         hasSearchText={false}
-      /> */}
+      />
       <div
         className='flex cursor-pointer items-center gap-x-2 py-1 pl-3 pr-2'
         onClick={loadMore}

web/app/components/workflow/types.ts

@@ -445,6 +445,10 @@ export type ToolWithProvider = Collection & {
   meta: PluginMeta
 }
 
+export type RAGRecommendedPlugin = ToolWithProvider & {
+  installed: boolean
+}
+
 export enum SupportUploadFileTypes {
   image = 'image',
   document = 'document',

web/service/use-tools.ts

@@ -4,7 +4,7 @@ import type {
   MCPServerDetail,
   Tool,
 } from '@/app/components/tools/types'
-import type { ToolWithProvider } from '@/app/components/workflow/types'
+import type { RAGRecommendedPlugin, ToolWithProvider } from '@/app/components/workflow/types'
 import type { AppIconType } from '@/types/app'
 import { useInvalid } from './use-base'
 import {
@@ -311,3 +311,11 @@ export const useRemoveProviderCredentials = ({
     onSuccess,
   })
 }
+
+export const useRAGRecommendedPlugins = (enabled: boolean) => {
+  return useQuery<RAGRecommendedPlugin[]>({
+    queryKey: [NAME_SPACE, 'rag-recommended-plugins'],
+    queryFn: () => get<RAGRecommendedPlugin[]>('/rag/pipelines/recommended-plugins'),
+    enabled,
+  })
+}