From b4c98daa8daa5ca52b9001923f84868392c89514 Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 3 Sep 2025 16:05:55 +0800 Subject: [PATCH 1/5] 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) +} From d755b2885e0e6cd06cc259aa57e76546a5456a2f Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 3 Sep 2025 16:22:59 +0800 Subject: [PATCH 2/5] refactor(workflow): enhance handleExportDSL function and clean up code structure --- .../components/rag-pipeline-main.tsx | 30 +++++++++---------- .../components/workflow-app/hooks/use-DSL.ts | 3 +- .../components/workflow/hooks-store/store.ts | 2 +- .../panel/version-history-panel/index.tsx | 2 +- 4 files changed, 19 insertions(+), 18 deletions(-) diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx index 5daf1f2ceb..137352f947 100644 --- a/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx +++ b/web/app/components/rag-pipeline/components/rag-pipeline-main.tsx @@ -70,21 +70,21 @@ const RagPipelineMain = ({ ...configsMap, }) const { - hasNodeInspectVars, - hasSetInspectVar, - fetchInspectVarValue, - editInspectVarValue, - renameInspectVarName, - appendNodeInspectVars, - deleteInspectVar, - deleteNodeInspectorVars, - deleteAllInspectorVars, - isInspectVarEdited, - resetToLastRunVar, - invalidateSysVarValues, - resetConversationVar, - invalidateConversationVarValues, - } = useInspectVarsCrud() + hasNodeInspectVars, + hasSetInspectVar, + fetchInspectVarValue, + editInspectVarValue, + renameInspectVarName, + appendNodeInspectVars, + deleteInspectVar, + deleteNodeInspectorVars, + deleteAllInspectorVars, + isInspectVarEdited, + resetToLastRunVar, + invalidateSysVarValues, + resetConversationVar, + invalidateConversationVarValues, + } = useInspectVarsCrud() const hooksStore = useMemo(() => { return { diff --git a/web/app/components/workflow-app/hooks/use-DSL.ts b/web/app/components/workflow-app/hooks/use-DSL.ts index 372eb2c850..1fedfc8bed 100644 --- a/web/app/components/workflow-app/hooks/use-DSL.ts +++ b/web/app/components/workflow-app/hooks/use-DSL.ts @@ -22,7 +22,7 @@ export const useDSL = () => { const appDetail = useAppStore(s => s.appDetail) - const handleExportDSL = useCallback(async (include = false) => { + const handleExportDSL = useCallback(async (include = false, workflowId?: string) => { if (!appDetail) return @@ -35,6 +35,7 @@ export const useDSL = () => { const { data } = await exportAppConfig({ appID: appDetail.id, include, + workflowID: workflowId, }) const a = document.createElement('a') const file = new Blob([data], { type: 'application/yaml' }) diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts index 4e8c189c49..562faee06b 100644 --- a/web/app/components/workflow/hooks-store/store.ts +++ b/web/app/components/workflow/hooks-store/store.ts @@ -48,7 +48,7 @@ export type CommonHooksFnMap = { availableNodesMetaData?: AvailableNodesMetaData getWorkflowRunAndTraceUrl: (runId?: string) => { runUrl: string; traceUrl: string } exportCheck?: () => Promise - handleExportDSL?: (include?: boolean) => Promise + handleExportDSL?: (include?: boolean, flowId?: string) => Promise fetchInspectVars: (params: { passInVars?: boolean, vars?: VarInInspect[], passedInAllPluginInfoList?: Record, passedInSchemaTypeDefinitions?: SchemaTypeDefinition[] }) => Promise hasNodeInspectVars: (nodeId: string) => boolean hasSetInspectVar: (nodeId: string, name: string, sysVars: VarInInspect[], conversationVars: VarInInspect[]) => boolean diff --git a/web/app/components/workflow/panel/version-history-panel/index.tsx b/web/app/components/workflow/panel/version-history-panel/index.tsx index 5c20da1ac1..eeb4f50720 100644 --- a/web/app/components/workflow/panel/version-history-panel/index.tsx +++ b/web/app/components/workflow/panel/version-history-panel/index.tsx @@ -120,7 +120,7 @@ export const VersionHistoryPanel = ({ }) break case VersionHistoryContextMenuOptions.exportDSL: - handleExportDSL(false, item.id) + handleExportDSL?.(false, item.id) break } }, [t, handleExportDSL]) From 08d6fcfd526454859d5cf1cf830c5bffaf1b0f5d Mon Sep 17 00:00:00 2001 From: Joel Date: Wed, 3 Sep 2025 16:48:41 +0800 Subject: [PATCH 3/5] fix: large data markdown ui problems --- .../components/workflow/variable-inspect/display-content.tsx | 5 +++-- .../components/workflow/variable-inspect/value-content.tsx | 1 + 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/web/app/components/workflow/variable-inspect/display-content.tsx b/web/app/components/workflow/variable-inspect/display-content.tsx index 06af502b26..f9f23212c0 100644 --- a/web/app/components/workflow/variable-inspect/display-content.tsx +++ b/web/app/components/workflow/variable-inspect/display-content.tsx @@ -22,10 +22,11 @@ type DisplayContentProps = { readonly: boolean handleTextChange?: (value: string) => void handleEditorChange?: (value: string) => void + className?: string } const DisplayContent = (props: DisplayContentProps) => { - const { previewType, varType, schemaType, mdString, jsonString, readonly, handleTextChange, handleEditorChange } = props + const { previewType, varType, schemaType, mdString, jsonString, readonly, handleTextChange, handleEditorChange, className } = props const [viewMode, setViewMode] = useState(ViewMode.Code) const [isFocused, setIsFocused] = useState(false) const { t } = useTranslation() @@ -50,7 +51,7 @@ const DisplayContent = (props: DisplayContentProps) => { }, [previewType, schemaType, jsonString]) return ( -
+
{previewType === PreviewType.Markdown && (
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx index 4919acfad9..3414164143 100644 --- a/web/app/components/workflow/variable-inspect/value-content.tsx +++ b/web/app/components/workflow/variable-inspect/value-content.tsx @@ -198,6 +198,7 @@ const ValueContent = ({ mdString={value as any} readonly={textEditorDisabled} handleTextChange={handleTextChange} + className={cn(isTruncated && 'pt-[36px]')} /> ) : (