From 78c867b9a3c45f46db45d3218342baa7043be8d6 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 21 Nov 2024 18:11:19 +0800
Subject: [PATCH] use plugin detail for builtin tool

---
 .../plugins/plugin-detail-panel/index.tsx     |  13 +-
 .../plugins/plugin-page/plugins-panel.tsx     |   9 +-
 web/app/components/tools/provider-list.tsx    | 161 ++++++++++--------
 web/app/components/tools/types.ts             |   1 +
 4 files changed, 102 insertions(+), 82 deletions(-)

diff --git a/web/app/components/plugins/plugin-detail-panel/index.tsx b/web/app/components/plugins/plugin-detail-panel/index.tsx
index c9e4213137..d42304742b 100644
--- a/web/app/components/plugins/plugin-detail-panel/index.tsx
+++ b/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'>
diff --git a/web/app/components/plugins/plugin-page/plugins-panel.tsx b/web/app/components/plugins/plugin-page/plugins-panel.tsx
index 49153bbb53..76e3ea7eca 100644
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/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}
+      />
     </>
   )
 }
diff --git a/web/app/components/tools/provider-list.tsx b/web/app/components/tools/provider-list.tsx
index 863d4ed5f7..a6f5accec2 100644
--- a/web/app/components/tools/provider-list.tsx
+++ b/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,92 +54,105 @@ 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}
-        className='relative flex flex-col overflow-y-auto bg-gray-100 grow'
-      >
-        <div className={cn(
-          'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-20 flex-wrap gap-y-2',
-          currentProvider && 'pr-6',
-        )}>
-          <TabSliderNew
-            value={activeTab}
-            onChange={(state) => {
-              setActiveTab(state)
-              if (state !== activeTab)
-                setCurrentProvider(undefined)
-            }}
-            options={options}
-          />
-          <div className='flex items-center gap-2'>
-            <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
-            <Input
-              showLeftIcon
-              showClearIcon
-              wrapperClassName='w-[200px]'
-              value={keywords}
-              onChange={e => handleKeywordsChange(e.target.value)}
-              onClear={() => handleKeywordsChange('')}
-            />
-          </div>
-        </div>
-        {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && (
+    <>
+      <div className='relative flex overflow-hidden bg-gray-100 shrink-0 h-0 grow'>
+        <div
+          ref={containerRef}
+          className='relative flex flex-col overflow-y-auto bg-gray-100 grow'
+        >
           <div className={cn(
-            'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
+            'sticky top-0 flex justify-between items-center pt-4 px-12 pb-2 leading-[56px] bg-gray-100 z-20 flex-wrap gap-y-2',
+            currentProvider && 'pr-6',
           )}>
-            {activeTab === 'api' && <CustomCreateCard onRefreshData={refetch} />}
-            {filteredCollectionList.map(collection => (
-              <div
-                key={collection.id}
-                onClick={() => setCurrentProvider(collection)}
-              >
-                <Card
-                  className={cn(
-                    'border-[1.5px] border-transparent cursor-pointer',
-                    currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
-                  )}
-                  hideCornerMark
-                  payload={{
-                    ...collection,
-                    brief: collection.description,
-                  } as any}
-                  footer={
-                    <CardMoreInfo
-                      tags={collection.labels}
-                    />
-                  }
-                />
-              </div>
-            ))}
-            {!filteredCollectionList.length && activeTab === 'workflow' && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><WorkflowToolEmpty /></div>}
-          </div>
-        )}
-        {!filteredCollectionList.length && activeTab === 'builtin' && (
-          <Empty lightCard text={t('tools.noTools')} className='px-12' />
-        )}
-        {
-          enable_marketplace && activeTab === 'builtin' && (
-            <Marketplace
-              onMarketplaceScroll={() => {
-                containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' })
+            <TabSliderNew
+              value={activeTab}
+              onChange={(state) => {
+                setActiveTab(state)
+                if (state !== activeTab)
+                  setCurrentProvider(undefined)
               }}
-              searchPluginText={keywords}
-              filterPluginTags={tagFilterValue}
+              options={options}
             />
-          )
-        }
+            <div className='flex items-center gap-2'>
+              <LabelFilter value={tagFilterValue} onChange={handleTagsChange} />
+              <Input
+                showLeftIcon
+                showClearIcon
+                wrapperClassName='w-[200px]'
+                value={keywords}
+                onChange={e => handleKeywordsChange(e.target.value)}
+                onClear={() => handleKeywordsChange('')}
+              />
+            </div>
+          </div>
+          {(filteredCollectionList.length > 0 || activeTab !== 'builtin') && (
+            <div className={cn(
+              'relative grid content-start grid-cols-1 gap-4 px-12 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grow shrink-0',
+            )}>
+              {activeTab === 'api' && <CustomCreateCard onRefreshData={refetch} />}
+              {filteredCollectionList.map(collection => (
+                <div
+                  key={collection.id}
+                  onClick={() => setCurrentProvider(collection)}
+                >
+                  <Card
+                    className={cn(
+                      'border-[1.5px] border-transparent cursor-pointer',
+                      currentProvider?.id === collection.id && 'border-components-option-card-option-selected-border',
+                    )}
+                    hideCornerMark
+                    payload={{
+                      ...collection,
+                      brief: collection.description,
+                    } as any}
+                    footer={
+                      <CardMoreInfo
+                        tags={collection.labels}
+                      />
+                    }
+                  />
+                </div>
+              ))}
+              {!filteredCollectionList.length && activeTab === 'workflow' && <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'><WorkflowToolEmpty /></div>}
+            </div>
+          )}
+          {!filteredCollectionList.length && activeTab === 'builtin' && (
+            <Empty lightCard text={t('tools.noTools')} className='px-12' />
+          )}
+          {
+            enable_marketplace && activeTab === 'builtin' && (
+              <Marketplace
+                onMarketplaceScroll={() => {
+                  containerRef.current?.scrollTo({ top: containerRef.current.scrollHeight, behavior: 'smooth' })
+                }}
+                searchPluginText={keywords}
+                filterPluginTags={tagFilterValue}
+              />
+            )
+          }
+        </div>
       </div>
-      {currentProvider && (
+      {currentProvider && !currentProvider.plugin_id && (
         <ProviderDetail
           collection={currentProvider}
           onHide={() => setCurrentProvider(undefined)}
           onRefreshData={refetch}
         />
       )}
-    </div>
+      <PluginDetailPanel
+        detail={currentPluginDetail}
+        onUpdate={() => invalidateInstalledPluginList()}
+        onHide={() => setCurrentProvider(undefined)}
+      />
+    </>
   )
 }
 ProviderList.displayName = 'ToolProviderList'
diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts
index 34cc491481..27f187d1f7 100644
--- a/web/app/components/tools/types.ts
+++ b/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 = {