From 4c9dd4112ddb56e6e8e155115e5942ad2a320674 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 26 Jun 2025 10:48:11 +0800
Subject: [PATCH] feat: select box setting

---
 .../auto-update-setting/tool-picker.tsx       | 73 +++++++++++++++++--
 1 file changed, 68 insertions(+), 5 deletions(-)

diff --git a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
index 9f96e4a7aa..5108bb7b96 100644
--- a/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
+++ b/web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx
@@ -8,9 +8,12 @@ import {
 } from '@/app/components/base/portal-to-follow-elem'
 import { useFetchPluginListOrBundleList } from '@/service/use-plugins'
 import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/plugin-type-switch'
+import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
 
 type Props = {
-    trigger: React.ReactNode
+  trigger: React.ReactNode
   value: string[]
   onChange: (value: string[]) => void
   isShow: boolean
@@ -18,8 +21,6 @@ type Props = {
 
 }
 
-const allPluginTypes = [PLUGIN_TYPE_SEARCH_MAP.all, PLUGIN_TYPE_SEARCH_MAP.model, PLUGIN_TYPE_SEARCH_MAP.tool, PLUGIN_TYPE_SEARCH_MAP.agent, PLUGIN_TYPE_SEARCH_MAP.extension, PLUGIN_TYPE_SEARCH_MAP.bundle]
-
 const ToolPicker: FC<Props> = ({
   trigger,
   value,
@@ -27,24 +28,55 @@ const ToolPicker: FC<Props> = ({
   isShow,
   onShowChange,
 }) => {
+  const { t } = useTranslation()
   const toggleShowPopup = useCallback(() => {
     onShowChange(!isShow)
   }, [onShowChange, isShow])
 
+  const tabs = [
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.all,
+      name: t('plugin.category.all'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.model,
+      name: t('plugin.category.models'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.tool,
+      name: t('plugin.category.tools'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.agent,
+      name: t('plugin.category.agents'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.extension,
+      name: t('plugin.category.extensions'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.bundle,
+      name: t('plugin.category.bundles'),
+    },
+  ]
+
   const [pluginType, setPluginType] = useState(PLUGIN_TYPE_SEARCH_MAP.all)
   const [query, setQuery] = useState('')
+  const [tags, setTags] = useState<string[]>([])
   const { data } = useFetchPluginListOrBundleList({
     query,
+    tags,
     category: pluginType,
   })
   const isBundle = pluginType === PLUGIN_TYPE_SEARCH_MAP.bundle
   const list = (isBundle ? data?.data?.bundles : data?.data?.plugins) || []
+
   console.log(list)
   return (
     <PortalToFollowElem
         placement='top-start'
         offset={0}
-        open={isShow}
+        open={true}
         onOpenChange={onShowChange}
       >
         <PortalToFollowElemTrigger
@@ -53,7 +85,38 @@ const ToolPicker: FC<Props> = ({
           {trigger}
         </PortalToFollowElemTrigger>
         <PortalToFollowElemContent className='z-[1000]'>
-          <div>aafdf</div>
+          <div className={cn('relative min-h-20 w-[356px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-2 shadow-lg backdrop-blur-sm')}>
+            <div className='p-2 pb-1'>
+              <SearchBox
+                search={query}
+                onSearchChange={setQuery}
+                tags={tags}
+                onTagsChange={setTags}
+                size='small'
+                placeholder={t('plugin.searchTools')!}
+                inputClassName='w-full'
+              />
+            </div>
+            <div className='flex items-center justify-between border-b-[0.5px] border-divider-subtle bg-background-default-hover px-3 shadow-xs'>
+              <div className='flex h-8 items-center space-x-1'>
+                {
+                  tabs.map(tab => (
+                    <div
+                      className={cn(
+                        'flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover',
+                        'text-xs font-medium text-text-secondary',
+                        pluginType === tab.key && 'bg-state-base-hover-alt',
+                      )}
+                      key={tab.key}
+                      onClick={() => setPluginType(tab.key)}
+                    >
+                      {tab.name}
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+          </div>
         </PortalToFollowElemContent>
       </PortalToFollowElem>
   )