feat: add tag and q filter

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>(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<HTMLDivElement>(null)
@@ -134,6 +137,7 @@ const AllTools = ({
           wrapElemRef={wrapElemRef}
           list={notInstalledPlugins as any} ref={pluginRef}
           searchText={searchText}
+          tags={tags}
         />
       </div>
     </div>

web/app/components/workflow/block-selector/market-place-plugin/list.tsx

@@ -14,16 +14,19 @@ type Props = {
   wrapElemRef: React.RefObject<HTMLElement>
   list: Plugin[]
   searchText: string
+  tags: string[]
 }
 
 const List = ({
   wrapElemRef,
   searchText,
+  tags,
   list,
 }: Props, ref: any) => {
   const { t } = useTranslation()
-  const hasSearchText = !searchText
+  const hasFilter = !searchText
-  const urlWithSearchText = `${marketplaceUrlPrefix}/plugins?q=${searchText}`
+  const hasRes = list.length > 0
+  const urlWithSearchText = `${marketplaceUrlPrefix}/marketplace?q=${searchText}&tags=${tags.join(',')}`
   const nextToStickyELemRef = useRef<HTMLDivElement>(null)
 
   const { handleScroll, scrollPosition } = useStickyScroll({
@@ -58,7 +61,7 @@ const List = ({
     window.open(urlWithSearchText, '_blank')
   }
 
-  if (hasSearchText) {
+  if (hasFilter) {
     return (
       <Link
         className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-b-lg shadow-lg text-text-accent-light-mode-only cursor-pointer'
@@ -73,21 +76,23 @@ const List = ({
 
   return (
     <>
-      <div
+      {hasRes && (
-        className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName)}
+        <div
-        onClick={handleHeadClick}
+          className={cn('sticky z-10 flex justify-between h-8 px-4 py-1 text-text-primary system-sm-medium cursor-pointer', stickyClassName)}
-      >
+          onClick={handleHeadClick}
-        <span>{t('plugin.fromMarketplace')}</span>
-        <Link
-          href={urlWithSearchText}
-          target='_blank'
-          className='flex items-center text-text-accent-light-mode-only'
-          onClick={e => e.stopPropagation()}
         >
-          <span>{t('plugin.searchInMarketplace')}</span>
+          <span>{t('plugin.fromMarketplace')}</span>
-          <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+          <Link
-        </Link>
+            href={urlWithSearchText}
-      </div>
+            target='_blank'
+            className='flex items-center text-text-accent-light-mode-only'
+            onClick={e => e.stopPropagation()}
+          >
+            <span>{t('plugin.searchInMarketplace')}</span>
+            <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
+          </Link>
+        </div>
+      )}
       <div className='p-1' ref={nextToStickyELemRef}>
         {list.map((item, index) => (
           <Item

web/app/components/workflow/block-selector/tool-picker.tsx

@@ -48,6 +48,7 @@ const ToolPicker: FC<Props> = ({
 }) => {
   const { t } = useTranslation()
   const [searchText, setSearchText] = useState('')
+  const [tags, setTags] = useState<string[]>([])
 
   const { data: buildInTools } = useAllBuiltInTools()
   const { data: customTools } = useAllCustomTools()
@@ -111,14 +112,15 @@ const ToolPicker: FC<Props> = ({
             <SearchBox
               search={searchText}
               onSearchChange={setSearchText}
-              tags={[]}
+              tags={tags}
-              onTagsChange={() => { }}
+              onTagsChange={setTags}
               size='small'
               placeholder={t('plugin.searchTools')!}
             />
           </div>
           <AllTools
             className='mt-1'
+            tags={tags}
             searchText={searchText}
             onSelect={handleSelect}
             buildInTools={buildInTools || []}