From 25f34f6703df1ea983196f3244e62a813b9ac71b Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 24 Oct 2024 14:21:12 +0800
Subject: [PATCH] fix: marketplace plugin type icon

---
 web/app/components/plugins/hooks.ts           | 15 +++++++++++
 .../marketplace/plugin-type-switch.tsx        | 26 +++++++++++++------
 2 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 web/app/components/plugins/hooks.ts

diff --git a/web/app/components/plugins/hooks.ts b/web/app/components/plugins/hooks.ts
new file mode 100644
index 0000000000..ebee3a6331
--- /dev/null
+++ b/web/app/components/plugins/hooks.ts
@@ -0,0 +1,15 @@
+import { useRequest } from 'ahooks'
+
+export const useCheckInstallStatus = () => {
+  const { data, run, cancel } = useRequest(async () => {}, {
+    manual: true,
+    pollingInterval: 5000,
+    pollingErrorRetryCount: 2,
+  })
+
+  return {
+    data,
+    run,
+    cancel,
+  }
+}
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index 16be79db26..8f3c478c57 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -1,46 +1,56 @@
 'use client'
 
 import { useState } from 'react'
+import { PluginType } from '../types'
 import {
+  RiArchive2Line,
+  RiBrain2Line,
   RiHammerLine,
   RiPuzzle2Line,
 } from '@remixicon/react'
 import cn from '@/utils/classnames'
 
+const PLUGIN_TYPE_SEARCH_MAP = {
+  all: 'all',
+  model: PluginType.model,
+  tool: PluginType.tool,
+  extension: PluginType.extension,
+  bundle: 'bundle',
+}
 type PluginTypeSwitchProps = {
   onChange?: (type: string) => void
 }
 const options = [
   {
-    value: 'all',
+    value: PLUGIN_TYPE_SEARCH_MAP.all,
     text: 'All',
     icon: null,
   },
   {
-    value: 'models',
+    value: PLUGIN_TYPE_SEARCH_MAP.model,
     text: 'Models',
-    icon: null,
+    icon: <RiBrain2Line className='mr-1.5 w-4 h-4' />,
   },
   {
-    value: 'tools',
+    value: PLUGIN_TYPE_SEARCH_MAP.tool,
     text: 'Tools',
     icon: <RiHammerLine className='mr-1.5 w-4 h-4' />,
   },
   {
-    value: 'extensions',
+    value: PLUGIN_TYPE_SEARCH_MAP.extension,
     text: 'Extensions',
     icon: <RiPuzzle2Line className='mr-1.5 w-4 h-4' />,
   },
   {
-    value: 'bundles',
+    value: PLUGIN_TYPE_SEARCH_MAP.bundle,
     text: 'Bundles',
-    icon: null,
+    icon: <RiArchive2Line className='mr-1.5 w-4 h-4' />,
   },
 ]
 const PluginTypeSwitch = ({
   onChange,
 }: PluginTypeSwitchProps) => {
-  const [activeType, setActiveType] = useState('all')
+  const [activeType, setActiveType] = useState(PLUGIN_TYPE_SEARCH_MAP.all)
 
   return (
     <div className={cn(