From 197f1b39573606b53c8bdff0ed5f231717bed67b Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Fri, 1 Nov 2024 11:26:36 +0800
Subject: [PATCH] feat: search box

---
 .../plugins/marketplace/search-box/index.tsx  | 24 +++++++++++--------
 .../search-box/search-box-wrapper.tsx         |  6 ++++-
 .../marketplace/search-box/tags-filter.tsx    | 10 ++++++--
 .../workflow/block-selector/tool-picker.tsx   | 10 +++++++-
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/web/app/components/plugins/marketplace/search-box/index.tsx b/web/app/components/plugins/marketplace/search-box/index.tsx
index 12682bd725..7ca9ce17e0 100644
--- a/web/app/components/plugins/marketplace/search-box/index.tsx
+++ b/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 && (
-              <ActionButton onClick={() => handleSearchPluginTextChange('')}>
+            search && (
+              <ActionButton onClick={() => onSearchChange('')}>
                 <RiCloseLine className='w-4 h-4' />
               </ActionButton>
             )
diff --git a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx b/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
index 0758d7785b..a124d93eb4 100644
--- a/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx
+++ b/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'
     />
   )
 }
diff --git a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
index 51746fddb4..5114765544 100644
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/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
diff --git a/web/app/components/workflow/block-selector/tool-picker.tsx b/web/app/components/workflow/block-selector/tool-picker.tsx
index ffa6f3233c..9ae8d625f9 100644
--- a/web/app/components/workflow/block-selector/tool-picker.tsx
+++ b/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}