chore: toolpicker add trigger

web/app/(commonLayout)/plugins/test/tools-picker/page.tsx

@@ -3,11 +3,19 @@ import React from 'react'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 
 const ToolsPicker = () => {
+  const [show, setShow] = React.useState(true)
   return (
-    <ToolPicker
+    <div className=' mt-10 ml-10'>
-      supportAddCustomTool={true}
+      <ToolPicker
-      onSelect={() => { }}
+        trigger={<div className='inline-block w-[70px]'>Click me</div>}
-    />
+        isShow={show}
+        onShowChange={setShow}
+        disabled={false}
+        supportAddCustomTool={true}
+        onSelect={() => { }}
+      />
+    </div>
+
   )
 }
 

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

@@ -2,6 +2,15 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useEffect, useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
 import AllTools from '@/app/components/workflow/block-selector/all-tools'
 import type { ToolDefaultValue } from './types'
 import {
@@ -12,11 +21,23 @@ import {
 import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types'
 
 type Props = {
+  disabled: boolean
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
   onSelect: (tool: ToolDefaultValue) => void
   supportAddCustomTool?: boolean
 }
 
 const ToolPicker: FC<Props> = ({
+  disabled,
+  trigger,
+  placement = 'right-start',
+  offset = 0,
+  isShow,
+  onShowChange,
   onSelect,
   supportAddCustomTool,
 }) => {
@@ -37,23 +58,44 @@ const ToolPicker: FC<Props> = ({
     })()
   }, [])
 
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
   const handleSelect = (_type: BlockEnum, tool?: ToolDefaultValue) => {
     onSelect(tool!)
   }
 
   return (
-    <div className="relative mt-5 mx-auto w-[320px] bg-white">
+    <PortalToFollowElem
-      <input placeholder='search holder' value={searchText} onChange={e => setSearchText(e.target.value)} />
+      placement={placement}
-      <AllTools
+      offset={offset}
-        className='mt-1'
+      open={isShow}
-        searchText={searchText}
+      onOpenChange={onShowChange}
-        onSelect={handleSelect}
+    >
-        buildInTools={buildInTools}
+      <PortalToFollowElemTrigger
-        customTools={customTools}
+        asChild
-        workflowTools={workflowTools}
+        onClick={handleTriggerClick}
-        supportAddCustomTool={supportAddCustomTool}
+      >
-      />
+        {trigger}
-    </div>
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className="relative w-[320px] min-h-20 bg-white">
+          <input placeholder='search holder' value={searchText} onChange={e => setSearchText(e.target.value)} />
+          <AllTools
+            className='mt-1'
+            searchText={searchText}
+            onSelect={handleSelect}
+            buildInTools={buildInTools}
+            customTools={customTools}
+            workflowTools={workflowTools}
+            supportAddCustomTool={supportAddCustomTool}
+          />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
   )
 }