From 46614cc6f5c9a712c09ecd3f46e61183f00a925f Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Tue, 7 Jan 2025 14:41:48 +0800
Subject: [PATCH] fix badge & refresh state of tool install state

---
 web/app/components/base/badge.tsx             |  2 +-
 .../plugins/plugin-detail-panel/index.tsx     | 22 +++++++++++++++++++
 .../tool-selector/index.tsx                   |  4 +++-
 .../components/plugins/plugin-item/index.tsx  |  7 ++++--
 4 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/web/app/components/base/badge.tsx b/web/app/components/base/badge.tsx
index 78b9a76326..fe034ad2f4 100644
--- a/web/app/components/base/badge.tsx
+++ b/web/app/components/base/badge.tsx
@@ -20,7 +20,7 @@ const Badge = ({
   return (
     <div
       className={cn(
-        'inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
+        'relative inline-flex items-center px-[5px] h-5 rounded-[5px] border border-divider-deep leading-3 text-text-tertiary',
         uppercase ? 'system-2xs-medium-uppercase' : 'system-xs-medium',
         className,
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index 4d20c0877d..692b2ecd26 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/index.tsx
@@ -9,6 +9,7 @@ import AgentStrategyList from './agent-strategy-list'
 import Drawer from '@/app/components/base/drawer'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
 
 type Props = {
   detail?: PluginDetail
@@ -27,6 +28,16 @@ const PluginDetailPanel: FC<Props> = ({
     onUpdate()
   }
 
+  const [value, setValue] = React.useState({
+    provider_name: 'langgenius/google/google',
+    tool_name: 'google_search',
+  })
+
+  const testHandle = (item: any) => {
+    console.log(item)
+    setValue(item)
+  }
+
   if (!detail)
     return null
 
@@ -52,6 +63,17 @@ const PluginDetailPanel: FC<Props> = ({
             {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
             {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
             {!!detail.declaration.model && <ModelList detail={detail} />}
+            {false && (
+              <div className='px-4'>
+                <ToolSelector
+                  scope={'all'}
+                  value={value}
+                  onSelect={item => testHandle(item)}
+                  onDelete={() => testHandle(null)}
+                  supportEnableSwitch
+                />
+              </div>
+            )}
           </div>
         </>
       )}
diff --git a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
index c59a1799f3..5eb63a3126 100644
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@@ -32,7 +32,7 @@ import {
   useInvalidateAllBuiltInTools,
   useUpdateProviderCredentials,
 } from '@/service/use-tools'
-import { useInstallPackageFromMarketPlace } from '@/service/use-plugins'
+import { useInstallPackageFromMarketPlace, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
 import { CollectionType } from '@/app/components/tools/types'
 import type { ToolDefaultValue } from '@/app/components/workflow/block-selector/types'
@@ -94,6 +94,7 @@ const ToolSelector: FC<Props> = ({
   const { data: customTools } = useAllCustomTools()
   const { data: workflowTools } = useAllWorkflowTools()
   const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
 
   // plugin info check
   const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
@@ -183,6 +184,7 @@ const ToolSelector: FC<Props> = ({
     try {
       await installPackageFromMarketPlace(manifest.latest_package_identifier)
       invalidateAllBuiltinTools()
+      invalidateInstalledPluginList()
     }
     catch (e: any) {
       Toast.notify({ type: 'error', message: `${e.message || e}` })
diff --git a/web/app/components/plugins/plugin-item/index.tsx b/web/app/components/plugins/plugin-item/index.tsx
index 469af683b8..ef564230ea 100644
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@@ -21,7 +21,7 @@ import Action from './action'
 import cn from '@/utils/classnames'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
 import { useCategories } from '../hooks'
 import { useProviderContext } from '@/context/provider-context'
 import { useRenderI18nObject } from '@/hooks/use-i18n'
@@ -41,6 +41,7 @@ const PluginItem: FC<Props> = ({
   const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
   const { refreshModelProviders } = useProviderContext()
 
   const {
@@ -62,8 +63,10 @@ const PluginItem: FC<Props> = ({
     invalidateInstalledPluginList()
     if (PluginType.model.includes(category))
       refreshModelProviders()
-    if (PluginType.tool.includes(category))
+    if (PluginType.tool.includes(category)) {
       invalidateAllToolProviders()
+      invalidateAllBuiltinTools()
+    }
   }
   const getValueFromI18nObject = useRenderI18nObject()
   const title = getValueFromI18nObject(label)