diff --git a/web/app/components/workflow/block-selector/all-tools.tsx b/web/app/components/workflow/block-selector/all-tools.tsx index 67c30f4aea..8f0462e0cd 100644 --- a/web/app/components/workflow/block-selector/all-tools.tsx +++ b/web/app/components/workflow/block-selector/all-tools.tsx @@ -90,7 +90,11 @@ const AllTools = ({ viewType={activeView} /> {/* Plugins from marketplace */} - + ) 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 9078d85216..3ead685d47 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 @@ -7,21 +7,23 @@ import type { Plugin } from '@/app/components/plugins/types.ts' import cn from '@/utils/classnames' import Link from 'next/link' import { marketplaceUrlPrefix } from '@/config' -import { RiArrowRightUpLine } from '@remixicon/react' +import { RiArrowRightUpLine, RiSearchLine } from '@remixicon/react' // import { RiArrowRightUpLine } from '@remixicon/react' type Props = { wrapElemRef: React.RefObject - hasSearchText: boolean list: Plugin[] + searchText: string } const List = ({ wrapElemRef, - hasSearchText, + searchText, list, }: Props, ref: any) => { const { t } = useTranslation() + const hasSearchText = !searchText + const urlWithSearchText = `${marketplaceUrlPrefix}/plugins?q=${searchText}` const nextToStickyELemRef = useRef(null) const { handleScroll, scrollPosition } = useStickyScroll({ @@ -32,11 +34,11 @@ const List = ({ const stickyClassName = useMemo(() => { switch (scrollPosition) { case ScrollPosition.aboveTheWrap: - return 'top-0 h-9 pt-3 pb-2 shadow-xs bg-components-panel-bg-blur' + return 'top-0 h-9 pt-3 pb-2 shadow-xs bg-components-panel-bg-blur cursor-pointer' case ScrollPosition.showing: return 'bottom-0 pt-3 pb-1' case ScrollPosition.belowTheWrap: - return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur text-blue-500 shadow-lg text-text-accent-light-mode-only cursor-pointer' + return 'bottom-0 items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg cursor-pointer' } }, [scrollPosition]) @@ -44,17 +46,21 @@ const List = ({ handleScroll, })) - const scrollToView = () => { - if (scrollPosition !== ScrollPosition.belowTheWrap) + const handleHeadClick = () => { + if (scrollPosition === ScrollPosition.belowTheWrap) { + nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }) return - - nextToStickyELemRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' }) + } + window.open(urlWithSearchText, '_blank') } if (!hasSearchText) { return ( - + {t('plugin.findMoreInMarketplace')} @@ -64,13 +70,19 @@ const List = ({ return ( <>
{t('plugin.fromMarketplace')} - {/* {scrollPosition === ScrollPosition.belowTheWrap && ( + e.stopPropagation()} + > + {t('plugin.searchInMarketplace')} - )} */} +
{list.map((item, index) => ( @@ -80,6 +92,18 @@ const List = ({ onAction={() => { }} /> ))} +
+
+ + + {t('plugin.searchInMarketplace')} + +
+
) diff --git a/web/i18n/en-US/plugin.ts b/web/i18n/en-US/plugin.ts index a5429c2a1e..dc615d3a94 100644 --- a/web/i18n/en-US/plugin.ts +++ b/web/i18n/en-US/plugin.ts @@ -1,6 +1,7 @@ const translation = { from: 'From', findMoreInMarketplace: 'Find more in Marketplace', + searchInMarketplace: 'Search in Marketplace', fromMarketplace: 'From Marketplace', endpointsEnabled: '{{num}} sets of endpoints enabled', detailPanel: {