chore: toolpicker ui

web/app/components/workflow/block-selector/all-tools.tsx

@@ -90,7 +90,11 @@ const AllTools = ({
           viewType={activeView}
         />
         {/* Plugins from marketplace */}
-        <PluginList wrapElemRef={wrapElemRef} list={[toolNotion, extensionDallE, modelGPT4] as any} ref={pluginRef} />
+        <PluginList
+          wrapElemRef={wrapElemRef}
+          list={[toolNotion, extensionDallE, modelGPT4] as any} ref={pluginRef}
+          searchText={searchText}
+        />
       </div>
     </div>
   )

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<HTMLElement>
-  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<HTMLDivElement>(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 (
-      <Link className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium  items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur  shadow-lg text-text-accent-light-mode-only cursor-pointer'
-        href={`${marketplaceUrlPrefix}/plugins`} target='_blank'>
+      <Link
+        className='sticky bottom-0 z-10 flex h-8 px-4 py-1 system-sm-medium items-center rounded-b-xl border-t border-[0.5px] border-components-panel-border bg-components-panel-bg-blur  shadow-lg text-text-accent-light-mode-only cursor-pointer'
+        href={`${marketplaceUrlPrefix}/plugins`}
+        target='_blank'
+      >
         <span>{t('plugin.findMoreInMarketplace')}</span>
         <RiArrowRightUpLine className='ml-0.5 w-3 h-3' />
       </Link>
@@ -64,13 +70,19 @@ const List = ({
   return (
     <>
       <div
-        className={cn('sticky z-10 flex h-8 px-4 py-1 text-text-primary system-sm-medium', stickyClassName)}
-        onClick={scrollToView}
+        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>
-        {/* {scrollPosition === ScrollPosition.belowTheWrap && (
+        <Link
+          href={urlWithSearchText}
+          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) => (
@@ -80,6 +92,18 @@ const List = ({
             onAction={() => { }}
           />
         ))}
+        <div className='mt-2 mb-3 flex items-center space-x-2'>
+          <div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(16,24,40,0.08)] to-[rgba(255,255,255,0.01)]"></div>
+          <Link
+            href={urlWithSearchText}
+            target='_blank'
+            className='shrink-0 flex items-center h-4 system-sm-medium text-text-accent-light-mode-only'
+          >
+            <RiSearchLine className='w-3 h-3' />
+            <span>{t('plugin.searchInMarketplace')}</span>
+          </Link>
+          <div className="w-[90px] h-[2px] bg-gradient-to-l from-[rgba(255,255,255,0.01)] to-[rgba(16,24,40,0.08)]"></div>
+        </div>
       </div>
     </>
   )

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: {