chore: init tool select component

web/app/components/workflow/nodes/_base/components/agent-strategy-selector.tsx

@@ -1,13 +1,16 @@
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 import { useState } from 'react'
-import AllTools from '../../../block-selector/all-tools'
 import type { Strategy } from './agent-strategy'
 import classNames from '@/utils/classnames'
-import { RiArrowDownSLine, RiErrorWarningFill } from '@remixicon/react'
+import { RiArrowDownSLine, RiArrowRightUpLine, RiErrorWarningFill } from '@remixicon/react'
 import { useAllBuiltInTools } from '@/service/use-tools'
 import Tooltip from '@/app/components/base/tooltip'
 import Link from 'next/link'
 import { InstallPluginButton } from './install-plugin-button'
+import SearchInput from '@/app/components/base/search-input'
+import ViewTypeSelect, { ViewType } from '../../../block-selector/view-type-select'
+import Tools from '../../../block-selector/tools'
+import { MARKETPLACE_URL_PREFIX } from '@/config'
 
 const ExternalNotInstallWarn = () => {
   // TODO: add i18n label
@@ -36,11 +39,13 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
   const { value, onChange } = props
   const [open, setOpen] = useState(false)
   const list = useAllBuiltInTools()
+  const [viewType, setViewType] = useState<ViewType>(ViewType.flat)
   // TODO: should be replaced by real data
   const isExternalInstalled = true
-  return <PortalToFollowElem open={open} onOpenChange={setOpen}>
+  return <PortalToFollowElem open={open} onOpenChange={setOpen} placement='bottom' offset={0}>
     <PortalToFollowElemTrigger className='w-full'>
       <div className='py-2 pl-3 pr-2 flex items-center rounded-lg bg-components-input-bg-normal w-full hover:bg-state-base-hover-alt' onClick={() => setOpen(true)}>
+        {/* eslint-disable-next-line @next/next/no-img-element */}
         {list.data && <img
           src={list.data.find(
             coll => coll,
@@ -56,31 +61,41 @@ export const AgentStrategySelector = (props: AgentStrategySelectorProps) => {
           {value?.agent_strategy_name || 'Select agentic strategy'}
         </p>
         <div className='ml-auto flex items-center gap-1'>
-          <InstallPluginButton onClick={e => e.preventDefault()} />
+          <InstallPluginButton onClick={e => e.stopPropagation()} size={'small'} />
           {isExternalInstalled ? <ExternalNotInstallWarn /> : <RiArrowDownSLine className='size-4 text-text-tertiary' />}
         </div>
       </div>
     </PortalToFollowElemTrigger>
     <PortalToFollowElemContent>
-      {list.data && <AllTools
-        className='border-components-panel-border bg-components-panel-bg-blur'
-        searchText=''
-        tags={[]}
-        buildInTools={list.data}
-        customTools={[]}
-        workflowTools={[]}
-        onSelect={(_e, tool) => {
-          if (!tool) {
-          // TODO: should not be called, try it
-            return
-          }
-          onChange({
-            agent_strategy_name: tool.title,
-            agent_strategy_provider_name: tool.provider_name,
-            agent_parameters: {},
-          })
-        }}
-      />}
+      <div className='bg-components-panel-bg-blur border-components-panel-border border-[0.5px] rounded-md shadow overflow-hidden'>
+        <header className='p-2 gap-1 flex'>
+          <SearchInput placeholder='Search agentic strategy' value='' onChange={console.error} />
+          <ViewTypeSelect viewType={viewType} onChange={setViewType} />
+        </header>
+        <main className="h-96 relative overflow-hidden">
+          <Tools
+            tools={list.data || []}
+            viewType={viewType}
+            onSelect={(_, tool) => {
+              onChange({
+                agent_strategy_name: tool!.title,
+                agent_strategy_provider_name: tool!.provider_name,
+                agent_parameters: tool!.params,
+              })
+              setOpen(false)
+            }}
+            hasSearchText={false}
+            showWorkflowEmpty
+          />
+          <div className='sticky bottom-0 px-4 py-2 flex items-center justify-center border-t border-divider-subtle text-text-accent-light-mode-only bg-components-panel-bg text-xs'>
+            Find more in
+            {/** //TODO: replace URL */}
+            <Link href={MARKETPLACE_URL_PREFIX} className='flex ml-1'>
+              Marketplace <RiArrowRightUpLine className='size-3' />
+            </Link>
+          </div>
+        </main>
+      </div>
     </PortalToFollowElemContent>
   </PortalToFollowElem>
 }