diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index da7640439f..566950782a 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -23,6 +23,7 @@ import { useMarketplacePlugins } from '../../plugins/marketplace/hooks' type AllToolsProps = { className?: string searchText: string + tags: string[] buildInTools: ToolWithProvider[] customTools: ToolWithProvider[] workflowTools: ToolWithProvider[] @@ -34,6 +35,7 @@ type AllToolsProps = { const AllTools = ({ className, searchText, + tags = [], onSelect, buildInTools, workflowTools, @@ -45,7 +47,7 @@ const AllTools = ({ const tabs = useToolTabs() const [activeTab, setActiveTab] = useState(ToolTypeEnum.All) const [activeView, setActiveView] = useState(ViewType.flat) - + const hasFilter = searchText || tags.length > 0 const tools = useMemo(() => { let mergedTools: ToolWithProvider[] = [] if (activeTab === ToolTypeEnum.All) @@ -57,7 +59,7 @@ const AllTools = ({ if (activeTab === ToolTypeEnum.Workflow) mergedTools = workflowTools - if (!searchText) + if (!hasFilter) return mergedTools.filter(toolWithProvider => toolWithProvider.tools.length > 0) return mergedTools.filter((toolWithProvider) => { @@ -65,7 +67,7 @@ const AllTools = ({ return tool.label[language].toLowerCase().includes(searchText.toLowerCase()) }) }) - }, [activeTab, buildInTools, customTools, workflowTools, searchText, language]) + }, [activeTab, buildInTools, customTools, workflowTools, searchText, language, hasFilter]) const { queryPluginsWithDebounced: fetchPlugins, @@ -73,14 +75,15 @@ const AllTools = ({ } = useMarketplacePlugins() useEffect(() => { - if (searchText) { + if (searchText || tags.length > 0) { fetchPlugins({ query: searchText, + tags, category: PluginType.tool, }) } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [searchText]) + }, [searchText, tags]) const pluginRef = useRef(null) const wrapElemRef = useRef(null) @@ -134,6 +137,7 @@ const AllTools = ({ wrapElemRef={wrapElemRef} list={notInstalledPlugins as any} ref={pluginRef} searchText={searchText} + tags={tags} /> diff --git a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx index 6c82bd5c0c..2e7e13be9e 100644 --- a/web/app/components/workflow/block-selector/market-place-plugin/list.tsx +++ b/web/app/components/workflow/block-selector/market-place-plugin/list.tsx @@ -14,16 +14,19 @@ type Props = { wrapElemRef: React.RefObject list: Plugin[] searchText: string + tags: string[] } const List = ({ wrapElemRef, searchText, + tags, list, }: Props, ref: any) => { const { t } = useTranslation() - const hasSearchText = !searchText - const urlWithSearchText = `${marketplaceUrlPrefix}/plugins?q=${searchText}` + const hasFilter = !searchText + const hasRes = list.length > 0 + const urlWithSearchText = `${marketplaceUrlPrefix}/marketplace?q=${searchText}&tags=${tags.join(',')}` const nextToStickyELemRef = useRef(null) const { handleScroll, scrollPosition } = useStickyScroll({ @@ -58,7 +61,7 @@ const List = ({ window.open(urlWithSearchText, '_blank') } - if (hasSearchText) { + if (hasFilter) { return ( -
- {t('plugin.fromMarketplace')} - e.stopPropagation()} + {hasRes && ( +
- {t('plugin.searchInMarketplace')} - - -
+ {t('plugin.fromMarketplace')} + e.stopPropagation()} + > + {t('plugin.searchInMarketplace')} + + +
+ )}
{list.map((item, index) => ( = ({ }) => { const { t } = useTranslation() const [searchText, setSearchText] = useState('') + const [tags, setTags] = useState([]) const { data: buildInTools } = useAllBuiltInTools() const { data: customTools } = useAllCustomTools() @@ -111,14 +112,15 @@ const ToolPicker: FC = ({ { }} + tags={tags} + onTagsChange={setTags} size='small' placeholder={t('plugin.searchTools')!} />