use plugin detail for builtin tool

web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -6,26 +6,23 @@ import EndpointList from './endpoint-list'
 import ActionList from './action-list'
 import ModelList from './model-list'
 import Drawer from '@/app/components/base/drawer'
-import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import type { PluginDetail } from '@/app/components/plugins/types'
 import cn from '@/utils/classnames'
 
 type Props = {
   detail?: PluginDetail
   onUpdate: () => void
+  onHide: () => void
 }
 
 const PluginDetailPanel: FC<Props> = ({
   detail,
   onUpdate,
+  onHide,
 }) => {
-  const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
-
-  const handleHide = () => setCurrentPluginID(undefined)
-
   const handleUpdate = (isDelete = false) => {
     if (isDelete)
-      handleHide()
+      onHide()
     onUpdate()
   }
 
@@ -36,7 +33,7 @@ const PluginDetailPanel: FC<Props> = ({
     <Drawer
       isOpen={!!detail}
       clickOutsideNotOpen={false}
-      onClose={handleHide}
+      onClose={onHide}
       footer={null}
       mask={false}
       positionCenter={false}
@@ -46,7 +43,7 @@ const PluginDetailPanel: FC<Props> = ({
         <>
           <DetailHeader
             detail={detail}
-            onHide={handleHide}
+            onHide={onHide}
             onUpdate={handleUpdate}
           />
           <div className='grow overflow-y-auto'>

web/app/components/plugins/plugin-page/plugins-panel.tsx

@@ -15,6 +15,7 @@ const PluginsPanel = () => {
   const { data: pluginList, isLoading: isPluginListLoading } = useInstalledPluginList()
   const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
   const currentPluginID = usePluginPageContext(v => v.currentPluginID)
+  const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
 
   const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
     setFilters(filters)
@@ -37,6 +38,8 @@ const PluginsPanel = () => {
     return detail
   }, [currentPluginID, pluginList?.plugins])
 
+  const handleHide = () => setCurrentPluginID(undefined)
+
   return (
     <>
       <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
@@ -54,7 +57,11 @@ const PluginsPanel = () => {
       ) : (
         <Empty />
       )}
-      <PluginDetailPanel detail={currentPluginDetail} onUpdate={() => invalidateInstalledPluginList()}/>
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={handleHide}
+      />
     </>
   )
 }

web/app/components/tools/provider-list.tsx

@@ -14,8 +14,10 @@ import CustomCreateCard from '@/app/components/tools/provider/custom-create-card
 import WorkflowToolEmpty from '@/app/components/tools/add-tool-modal/empty'
 import Card from '@/app/components/plugins/card'
 import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
 import { useSelector as useAppContextSelector } from '@/context/app-context'
 import { useAllToolProviders } from '@/service/use-tools'
+import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
 
 const ProviderList = () => {
   const { t } = useTranslation()
@@ -52,8 +54,15 @@ const ProviderList = () => {
   }, [activeTab, tagFilterValue, keywords, collectionList])
 
   const [currentProvider, setCurrentProvider] = useState<Collection | undefined>()
+  const { data: pluginList } = useInstalledPluginList()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const currentPluginDetail = useMemo(() => {
+    const detail = pluginList?.plugins.find(plugin => plugin.plugin_id === currentProvider?.plugin_id)
+    return detail
+  }, [currentProvider?.plugin_id, pluginList?.plugins])
 
   return (
+    <>
       <div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
         <div
           ref={containerRef}
@@ -130,14 +139,20 @@ const ProviderList = () => {
             )
           }
         </div>
-      {currentProvider && (
+      </div>
+      {currentProvider && !currentProvider.plugin_id && (
         <ProviderDetail
           collection={currentProvider}
           onHide={() => setCurrentProvider(undefined)}
           onRefreshData={refetch}
         />
       )}
-    </div>
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={() => setCurrentProvider(undefined)}
+      />
+    </>
   )
 }
 ProviderList.displayName = 'ToolProviderList'

web/app/components/tools/types.ts

@@ -48,6 +48,7 @@ export type Collection = {
   is_team_authorization: boolean
   allow_delete: boolean
   labels: string[]
+  plugin_id?: string
 }
 
 export type ToolParameter = {