From ed6037f398c9b35279ee7b9ce09cbcc211c350e8 Mon Sep 17 00:00:00 2001
From: lhwan <1017484907@qq.com>
Date: Mon, 26 Aug 2024 11:03:12 +0800
Subject: [PATCH] feat: dbgpts install&uninstall params change

---
 web/client/api/request.ts               |  8 +++---
 web/new-components/layout/Construct.tsx | 12 ++++----
 web/pages/construct/app/index.tsx       |  2 +-
 web/pages/construct/dbgpts/index.tsx    | 37 +++++++++++++++++--------
 4 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/web/client/api/request.ts b/web/client/api/request.ts
index de36fe2f6..63d54f546 100644
--- a/web/client/api/request.ts
+++ b/web/client/api/request.ts
@@ -350,9 +350,9 @@ export const postAgentInstall = (pluginName: string, user?: string) => {
     timeout: 60000,
   });
 };
-export const postDbgptsInstall = (pluginName: string, user?: string) => {
-  return POST("/api/v1/serve/dbgpts/hub/install", undefined, {
-    params: { plugin_name: pluginName, user },
+export const postDbgptsInstall = (data: object, user?: string) => {
+  return POST("/api/v1/serve/dbgpts/hub/install", data, {
+    params: { user },
     timeout: 60000,
   });
 };
@@ -364,7 +364,7 @@ export const postAgentUninstall = (pluginName: string, user?: string) => {
 };
 export const postDbgptsUninstall = (pluginName: string, user?: string) => {
   return POST("/api/v1/serve/dbgpts/my/uninstall", undefined, {
-    params: { plugin_name: pluginName, user },
+    params: { name: pluginName, user },
     timeout: 60000,
   });
 };
diff --git a/web/new-components/layout/Construct.tsx b/web/new-components/layout/Construct.tsx
index d67fab3c6..0caed8ff7 100644
--- a/web/new-components/layout/Construct.tsx
+++ b/web/new-components/layout/Construct.tsx
@@ -62,18 +62,18 @@ function ConstructLayout({ children }: { children: React.ReactNode }) {
     //   path: '/agent',
     //   icon: <BuildOutlined />,
     // },
-    {
-      key: 'dbgpts',
-      name: t('dbgpts_community'),
-      path: '/dbgpts',
-      icon: <BuildOutlined />,
-    },
     {
       key: 'prompt',
       name: t('Prompt'),
       icon: <MessageOutlined />,
       path: '/prompt',
     },
+    {
+      key: 'dbgpts',
+      name: t('dbgpts_community'),
+      path: '/dbgpts',
+      icon: <BuildOutlined />,
+    },
   ];
   const router = useRouter();
   const activeKey = router.pathname.split('/')[2];
diff --git a/web/pages/construct/app/index.tsx b/web/pages/construct/app/index.tsx
index 46988dcb7..7a5e9dbb4 100644
--- a/web/pages/construct/app/index.tsx
+++ b/web/pages/construct/app/index.tsx
@@ -297,7 +297,7 @@ export default function AppContent() {
               </Button>
             </div>
           </div>
-          <div className=" w-full flex flex-wrap pb-12 mx-[-8px]">
+          <div className="w-full flex flex-wrap pb-12 mx-[-8px]">
             {apps.map((item) => {
               return (
                 <BlurredCard
diff --git a/web/pages/construct/dbgpts/index.tsx b/web/pages/construct/dbgpts/index.tsx
index 418c79fcd..193de1240 100644
--- a/web/pages/construct/dbgpts/index.tsx
+++ b/web/pages/construct/dbgpts/index.tsx
@@ -17,6 +17,7 @@ function Agent() {
   const [searchValue, setSearchValue] = useState('');
   const [activeKey, setActiveKey] = useState<string>('market');
   const [uploading, setUploading] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [isError, setIsError] = useState(false);
   const [actionIndex, setActionIndex] = useState<number | undefined>();
 
@@ -33,10 +34,10 @@ function Agent() {
 
   const {
     data: agents = [],
-    loading,
     refresh,
   } = useRequest<IAgentPlugin[], []>(
     async () => {
+      setLoading(true);
       if (activeKey === 'my') {
         const [err, res] = await apiInterceptors(postDbgptsMy({
           name: searchValue || undefined,
@@ -44,6 +45,7 @@ function Agent() {
           page_index: pagination.pageNo,
           page_size: pagination.pageSize,
         }));
+        setLoading(false);
         setIsError(!!err);
         return res?.items ?? [];
       }
@@ -54,6 +56,7 @@ function Agent() {
         type: typeStr === 'all' ? undefined : typeStr,
       };
       const [err, res] = await apiInterceptors(postDbgptsQuery(queryParams));
+      setLoading(false);
       setIsError(!!err);
       return res?.items ?? [];
     },
@@ -76,12 +79,22 @@ function Agent() {
   useEffect(() => {
     refresh();
   }, [activeKey, typeStr]);
+
   const pluginAction = useCallback(
-    async (name: string, index: number, isInstall: boolean) => {
+    async (agent: { name: string }, index: number, isInstall: boolean) => {
       if (actionIndex) return;
       setActionIndex(index);
-      const [err] = await apiInterceptors((isInstall ? postDbgptsInstall : postDbgptsUninstall)(name));
-      if (!err) {
+      setLoading(true);
+      let errs = null;
+      if (isInstall) {
+        const [err] = await apiInterceptors(postDbgptsInstall(agent));
+        errs = err;
+      } else {
+        const [err] = await apiInterceptors(postDbgptsUninstall(agent.name));
+        errs = err;
+      }
+      setLoading(false);
+      if (!errs) {
         message.success('success');
         refresh();
       }
@@ -145,8 +158,8 @@ function Agent() {
 
   return (
     <ConstructLayout>
-      <div className="px-6">
-        <Spin spinning={loading}>
+      <Spin spinning={loading}>
+        <div className="h-screen w-full p-4 md:p-6 overflow-y-auto">
           <div className="flex justify-between items-center mb-6">
             <div className="flex items-center gap-4">
               <Segmented
@@ -181,7 +194,7 @@ function Agent() {
               </Button>
             </div>
           </div>
-          <div className='flex justify-start'>
+          <div className='w-full flex flex-wrap pb-12 mx-[-8px]'>
             <Segmented
               className="backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 border-2 border-white rounded-lg shadow p-1 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
               options={typeItems}
@@ -201,7 +214,7 @@ function Agent() {
               className="w-[230px] h-[40px] border-1 border-white ml-4 backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
             />
           </div>
-          <div className='flex flex-wrap'>
+          <div className='flex flex-wrap pb-12'>
             {agents.map((agent, index) => (
               <BlurredCard
                 logo={logoFn(agent.type)}
@@ -236,7 +249,7 @@ function Agent() {
                       Icon={<ClearOutlined />}
                       text="Uninstall"
                       onClick={() => {
-                        pluginAction(agent.name, index, false);
+                        pluginAction(agent, index, false);
                       }}
                     />
                   ) : (
@@ -244,7 +257,7 @@ function Agent() {
                       Icon={<DownloadOutlined />}
                       text="Install"
                       onClick={() => {
-                        pluginAction(agent.name, index, true);
+                        pluginAction(agent, index, true);
                       }}
                     />
                   )
@@ -253,8 +266,8 @@ function Agent() {
             ))}
           </div>
           {/* {activeKey !== 'market' ? <MyPlugins /> : <MarketPlugins />} */}
-        </Spin>
-      </div>
+        </div>
+      </Spin>
     </ConstructLayout>
   );
 }