feat: search box

web/app/components/plugins/marketplace/search-box/index.tsx

@@ -1,6 +1,5 @@
 'use client'
 import { RiCloseLine } from '@remixicon/react'
-import { useMarketplaceContext } from '../context'
 import TagsFilter from './tags-filter'
 import ActionButton from '@/app/components/base/action-button'
 import cn from '@/utils/classnames'
@@ -11,6 +10,8 @@ type SearchBoxProps = {
   inputClassName?: string
   tags: string[]
   onTagsChange: (tags: string[]) => void
+  size?: 'small' | 'large'
+  placeholder?: string
 }
 const SearchBox = ({
   search,
@@ -18,36 +19,39 @@ const SearchBox = ({
   inputClassName,
   tags,
   onTagsChange,
+  size = 'small',
+  placeholder = 'Search tools...',
 }: SearchBoxProps) => {
-  const intersected = useMarketplaceContext(v => v.intersected)
-  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
-  const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
-
   return (
     <div
       className={cn(
-        'sticky top-3 flex items-center mx-auto p-1.5 w-[640px] h-11 border border-components-chat-input-border bg-components-panel-bg-blur rounded-xl shadow-md z-[11]',
+        'flex items-center z-[11]',
+        size === 'large' && 'p-1.5 bg-components-panel-bg-blur rounded-xl shadow-md border border-components-chat-input-border',
+        size === 'small' && 'p-0.5 bg-components-input-bg-normal rounded-lg',
         inputClassName,
-        !intersected && 'w-[508px] transition-[width] duration-300',
       )}
     >
       <TagsFilter
         tags={tags}
         onTagsChange={onTagsChange}
+        size={size}
       />
       <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
       <div className='grow flex items-center p-1 pl-2'>
         <div className='flex items-center mr-2 py-0.5 w-full'>
           <input
-            className='grow block outline-none appearance-none body-md-medium text-text-secondary'
+            className={cn(
+              'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',
+            )}
             value={search}
             onChange={(e) => {
               onSearchChange(e.target.value)
             }}
+            placeholder={placeholder}
           />
           {
-            searchPluginText && (
+            search && (
-              <ActionButton onClick={() => handleSearchPluginTextChange('')}>
+              <ActionButton onClick={() => onSearchChange('')}>
                 <RiCloseLine className='w-4 h-4' />
               </ActionButton>
             )

web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx

@@ -12,11 +12,15 @@ const SearchBoxWrapper = () => {
 
   return (
     <SearchBox
-      inputClassName={cn(!intersected && 'w-[508px] transition-[width] duration-300')}
+      inputClassName={cn(
+        'sticky top-3 mx-auto w-[640px]',
+        !intersected && 'w-[508px] transition-[width] duration-300',
+      )}
       search={searchPluginText}
       onSearchChange={handleSearchPluginTextChange}
       tags={filterPluginTags}
       onTagsChange={handleFilterPluginTagsChange}
+      size='large'
     />
   )
 }

web/app/components/plugins/marketplace/search-box/tags-filter.tsx

@@ -18,10 +18,12 @@ import Input from '@/app/components/base/input'
 type TagsFilterProps = {
   tags: string[]
   onTagsChange: (tags: string[]) => void
+  size: 'small' | 'large'
 }
 const TagsFilter = ({
   tags,
   onTagsChange,
+  size,
 }: TagsFilterProps) => {
   const [open, setOpen] = useState(false)
   const [searchText, setSearchText] = useState('')
@@ -56,7 +58,9 @@ const TagsFilter = ({
     >
       <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
         <div className={cn(
-          'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
+          'flex items-center text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
+          size === 'large' && 'px-2 py-1 h-8',
+          size === 'small' && 'pr-1.5 py-0.5 h-7 pl-1 ',
           selectedTagsLength && 'text-text-secondary',
           open && 'bg-state-base-hover',
         )}>
@@ -65,6 +69,8 @@ const TagsFilter = ({
           </div>
           <div className={cn(
             'flex items-center p-1 system-sm-medium',
+            size === 'large' && 'p-1',
+            size === 'small' && 'px-0.5 py-1',
           )}>
             {
               !selectedTagsLength && 'All Tags'
@@ -95,7 +101,7 @@ const TagsFilter = ({
           }
         </div>
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-10'>
+      <PortalToFollowElemContent className='z-[1000]'>
         <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
           <div className='p-2 pb-1'>
             <Input

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

@@ -19,6 +19,7 @@ import {
   fetchAllWorkflowTools,
 } from '@/service/tools'
 import type { BlockEnum, ToolWithProvider } from '@/app/components/workflow/types'
+import SearchBox from '@/app/components/plugins/marketplace/search-box'
 
 type Props = {
   disabled: boolean
@@ -83,7 +84,14 @@ const ToolPicker: FC<Props> = ({
 
       <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)} />
+          <SearchBox
+            search={searchText}
+            onSearchChange={setSearchText}
+            tags={[]}
+            onTagsChange={() => {}}
+            size='small'
+            placeholder='Search tools...'
+          />
           <AllTools
             className='mt-1'
             searchText={searchText}