From b4c98daa8daa5ca52b9001923f84868392c89514 Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 3 Sep 2025 16:05:55 +0800 Subject: [PATCH] refactor(workflow): update RAG tool suggestions and improve filtering logic --- .../search-box/trigger/tool-selector.tsx | 5 +- .../panel/input-field/editor/form/hooks.ts | 2 +- .../workflow/block-selector/all-tools.tsx | 12 +-- .../market-place-plugin/list.tsx | 6 +- .../block-selector/rag-tool-suggestions.tsx | 87 ++++++++++++++----- web/i18n/en-US/app-debug.ts | 1 - web/i18n/en-US/pipeline.ts | 1 + web/i18n/zh-Hans/app-debug.ts | 1 - web/i18n/zh-Hans/pipeline.ts | 1 + web/service/use-plugins.ts | 4 +- web/service/use-tools.ts | 11 ++- 11 files changed, 86 insertions(+), 45 deletions(-) diff --git a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx index 43f1a20840..00f8c55a90 100644 --- a/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx +++ b/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx @@ -49,7 +49,10 @@ const ToolSelectorTrigger = ({ !!selectedTagsLength && ( onTagsChange([])} + onClick={(e) => { + e.stopPropagation() + onTagsChange([]) + }} /> ) } diff --git a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks.ts b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks.ts index bbca128cf1..87d4e9ce42 100644 --- a/web/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks.ts +++ b/web/app/components/rag-pipeline/components/panel/input-field/editor/form/hooks.ts @@ -54,7 +54,7 @@ export const useHiddenFieldNames = (type: PipelineInputVarType) => { break case PipelineInputVarType.checkbox: fieldNames = [ - t('appDebug.variableConfig.startedChecked'), + t('appDebug.variableConfig.startChecked'), t('appDebug.variableConfig.tooltips'), ] break diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index b5a722ada4..6a2e07a411 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -26,7 +26,6 @@ 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,13 +116,7 @@ const AllTools = ({ const wrapElemRef = useRef(null) const isSupportGroupView = [ToolTypeEnum.All, ToolTypeEnum.BuiltIn].includes(activeTab) - const isShowRAGRecommendations = isInRAGPipeline && activeTab === ToolTypeEnum.All && !searchText && tags.length === 0 - const { data: ragRecommendedPlugins } = useRAGRecommendedPlugins(isShowRAGRecommendations) - const recommendedPlugins = useMemo(() => { - if (ragRecommendedPlugins) - return [...ragRecommendedPlugins.installed_recommended_plugins] - return [] - }, [ragRecommendedPlugins]) + const isShowRAGRecommendations = isInRAGPipeline && activeTab === ToolTypeEnum.All && !hasFilter return (
@@ -154,9 +147,8 @@ const AllTools = ({ className='max-h-[464px] overflow-y-auto' onScroll={pluginRef.current?.handleScroll} > - {recommendedPlugins.length > 0 && ( + {isShowRAGRecommendations && ( (({ disableMaxWidth = false, }, ref) => { const { t } = useTranslation() - const hasFilter = !searchText + const noFilter = !searchText && tags.length === 0 const hasRes = list.length > 0 const urlWithSearchText = getMarketplaceUrl('', { q: searchText, tags: tags.join(',') }) const nextToStickyELemRef = useRef(null) @@ -66,7 +66,7 @@ const List = forwardRef(({ window.open(urlWithSearchText, '_blank') } - if (hasFilter) { + if (noFilter) { return ( (({ onAction={noop} /> ))} - {list.length > 0 && ( + {hasRes && (
> } const RAGToolSuggestions: React.FC = ({ - tools, viewType, onSelect, onTagsChange, }) => { const { t } = useTranslation() + const { + data: ragRecommendedPlugins, + isFetching: isFetchingRAGRecommendedPlugins, + } = useRAGRecommendedPlugins() + + const recommendedPlugins = useMemo(() => { + if (ragRecommendedPlugins) + return [...ragRecommendedPlugins.installed_recommended_plugins] + return [] + }, [ragRecommendedPlugins]) + const loadMore = useCallback(() => { onTagsChange((prev) => { if (prev.includes('rag')) @@ -35,26 +48,52 @@ const RAGToolSuggestions: React.FC = ({
{t('pipeline.ragToolSuggestions.title')}
- -
-
- + {isFetchingRAGRecommendedPlugins && ( +
+
-
- {t('common.operation.more')} -
-
+ )} + {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length === 0 && ( +

+ + ), + }} + /> +

+ )} + {!isFetchingRAGRecommendedPlugins && recommendedPlugins.length > 0 && ( + <> + +
+
+ +
+
+ {t('common.operation.more')} +
+
+ + )}
) } diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts index 32fb60b398..2ad705c563 100644 --- a/web/i18n/en-US/app-debug.ts +++ b/web/i18n/en-US/app-debug.ts @@ -401,7 +401,6 @@ const translation = { 'tooltips': 'Tooltips', 'tooltipsPlaceholder': 'Enter helpful text shown when hovering over the label', 'showAllSettings': 'Show All Settings', - 'checkbox': 'Checkbox', 'startSelectedOption': 'Start selected option', 'noDefaultSelected': 'Don\'t select', 'hide': 'Hide', diff --git a/web/i18n/en-US/pipeline.ts b/web/i18n/en-US/pipeline.ts index cdbb7df76d..e906d615f7 100644 --- a/web/i18n/en-US/pipeline.ts +++ b/web/i18n/en-US/pipeline.ts @@ -33,6 +33,7 @@ const translation = { }, ragToolSuggestions: { title: 'Suggestions for RAG', + noRecommendationPluginsInstalled: 'No recommended plugins installed, find more in Marketplace', }, } diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts index 66ccea58ec..0cb3bf6b5a 100644 --- a/web/i18n/zh-Hans/app-debug.ts +++ b/web/i18n/zh-Hans/app-debug.ts @@ -397,7 +397,6 @@ const translation = { 'tooltips': '提示', 'tooltipsPlaceholder': '输入悬停在标签上时显示的提示文本', 'showAllSettings': '显示所有设置', - 'checkbox': '复选框', 'startSelectedOption': '默认选中项', 'noDefaultSelected': '不默认选中', 'file': { diff --git a/web/i18n/zh-Hans/pipeline.ts b/web/i18n/zh-Hans/pipeline.ts index 72c53b42dc..0bba075196 100644 --- a/web/i18n/zh-Hans/pipeline.ts +++ b/web/i18n/zh-Hans/pipeline.ts @@ -33,6 +33,7 @@ const translation = { }, ragToolSuggestions: { title: 'RAG 工具推荐', + noRecommendationPluginsInstalled: '暂无已安装的推荐插件，更多插件请在 Marketplace 中查找', }, } diff --git a/web/service/use-plugins.ts b/web/service/use-plugins.ts index 2877ef15f2..f59e500792 100644 --- a/web/service/use-plugins.ts +++ b/web/service/use-plugins.ts @@ -39,7 +39,7 @@ import { useQuery, useQueryClient, } from '@tanstack/react-query' -import { useInvalidateAllBuiltInTools } from './use-tools' +import { useInvalidateAllBuiltInTools, useInvalidateRAGRecommendedPlugins } 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,12 +135,14 @@ export const useInstalledLatestVersion = (pluginIds: string[]) => { export const useInvalidateInstalledPluginList = () => { const queryClient = useQueryClient() const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools() + const invalidateRAGRecommendedPlugins = useInvalidateRAGRecommendedPlugins() return () => { queryClient.invalidateQueries( { queryKey: useInstalledPluginListKey, }) invalidateAllBuiltInTools() + invalidateRAGRecommendedPlugins() } } diff --git a/web/service/use-tools.ts b/web/service/use-tools.ts index 4d1e95d723..f78490da88 100644 --- a/web/service/use-tools.ts +++ b/web/service/use-tools.ts @@ -312,10 +312,15 @@ export const useRemoveProviderCredentials = ({ }) } -export const useRAGRecommendedPlugins = (enabled: boolean) => { +const useRAGRecommendedPluginListKey = [NAME_SPACE, 'rag-recommended-plugins'] + +export const useRAGRecommendedPlugins = () => { return useQuery({ - queryKey: [NAME_SPACE, 'rag-recommended-plugins'], + queryKey: useRAGRecommendedPluginListKey, queryFn: () => get('/rag/pipelines/recommended-plugins'), - enabled, }) } + +export const useInvalidateRAGRecommendedPlugins = () => { + return useInvalid(useRAGRecommendedPluginListKey) +}