feat: add dbgpts community

web/client/api/request.ts

@@ -4,6 +4,7 @@ import {
   PostAgentMyPluginResponse,
   PostAgentPluginResponse,
   PostAgentQueryParams,
+  PostDbgptMyQueryParams,
 } from "@/types/agent";
 import { GetAppInfoParams, IApp, IAgent, IAppData } from "@/types/app";
 import {
@@ -312,12 +313,24 @@ export const postAgentQuery = (data: PostAgentQueryParams) => {
     data
   );
 };
+export const postDbgptsQuery = (data: PostAgentQueryParams) => {
+  return POST<PostAgentQueryParams, PostAgentPluginResponse>(
+    `/api/v1/serve/dbgpts/hub/query_page?page=${data?.page_index}&page_size=${data?.page_size}`,
+    data
+  );
+};
 export const postAgentHubUpdate = (data?: PostAgentHubUpdateParams) => {
   return POST<PostAgentHubUpdateParams>(
     "/api/v1/agent/hub/update",
     data ?? { channel: "", url: "", branch: "", authorization: "" }
   );
 };
+export const postDbgptsHubUpdate = (data?: PostAgentHubUpdateParams) => {
+  return POST<PostAgentHubUpdateParams>(
+    "/api/v1/serve/dbgpts/hub/source/refresh",
+    data ?? { channel: "", url: "", branch: "", authorization: "" }
+  );
+};
 export const postAgentMy = (user?: string) => {
   return POST<undefined, PostAgentMyPluginResponse>(
     "/api/v1/agent/my",
@@ -325,18 +338,36 @@ export const postAgentMy = (user?: string) => {
     { params: { user } }
   );
 };
+export const postDbgptsMy = (data?: PostDbgptMyQueryParams) => {
+  return POST<PostDbgptMyQueryParams, PostAgentMyPluginResponse>(
+    `/api/v1/serve/dbgpts/my/query_page?page=${data?.page_index}&page_size=${data?.page_size}`,
+    data
+  );
+};
 export const postAgentInstall = (pluginName: string, user?: string) => {
   return POST("/api/v1/agent/install", undefined, {
     params: { plugin_name: pluginName, user },
     timeout: 60000,
   });
 };
+export const postDbgptsInstall = (pluginName: string, user?: string) => {
+  return POST("/api/v1/serve/dbgpts/hub/install", undefined, {
+    params: { plugin_name: pluginName, user },
+    timeout: 60000,
+  });
+};
 export const postAgentUninstall = (pluginName: string, user?: string) => {
   return POST("/api/v1/agent/uninstall", undefined, {
     params: { plugin_name: pluginName, user },
     timeout: 60000,
   });
 };
+export const postDbgptsUninstall = (pluginName: string, user?: string) => {
+  return POST("/api/v1/serve/dbgpts/my/uninstall", undefined, {
+    params: { plugin_name: pluginName, user },
+    timeout: 60000,
+  });
+};
 export const postAgentUpload = (
   user = "",
   data: FormData,

web/locales/en/common.ts

@@ -323,5 +323,11 @@ export const CommonEn = {
   All: "All",
   Please_input_prompt_name: "Please input prompt name",
   Copy_Btn: 'Copy',
-  Delete_Btn: 'Delete'
+  Delete_Btn: 'Delete',
+  dbgpts_community: 'DBGPTS Community',
+  my_dbgpts: 'My DBGPTS',
+  Refresh_dbgpts: 'Refresh from the community Git repository',
+  workflow: 'Workflow',
+  resources: 'Resources',
+  app: 'App',
 } as const;

web/locales/zh/common.ts

@@ -325,5 +325,11 @@ export const CommonZh: Resources["translation"] = {
   All: "全部",
   Please_input_prompt_name: "请输入prompt名称",
   Copy_Btn: '复制',
-  Delete_Btn: '删除'
+  Delete_Btn: '删除',
+  dbgpts_community: 'DBGPTS社区',
+  my_dbgpts: '我的DBGPTS',
+  Refresh_dbgpts: '从社区Git仓库刷新',
+  workflow: '工作流',
+  resources: '资源',
+  app: '应用',
 } as const;

web/new-components/common/blurredCard/index.tsx

@@ -37,7 +37,7 @@ const BlurredCard: React.FC<{
         className="backdrop-filter backdrop-blur-lg cursor-pointer  bg-white bg-opacity-70 border-2 border-white rounded-lg shadow p-4 relative w-full h-full dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
       >
         <div className="flex items-end relative bottom-8 justify-between w-full">
-          <div className="flex items-end gap-4 w-11/12">
+          <div className="flex items-end gap-4 w-11/12  flex-1">
             <div className="bg-white rounded-lg shadow-sm w-14 h-14 flex items-center p-3">
               {scene ? (
                 <AppDefaultIcon scene={scene} width={14} height={14} />
@@ -45,7 +45,7 @@ const BlurredCard: React.FC<{
                 logo && <Image src={logo} width={44} height={44} alt={name} className="w-8 min-w-8 rounded-full max-w-none" />
               )}
             </div>
-            <div>
+            <div className='flex-1'>
               {/** 先简单判断下 */}
               {name.length > 6 ? (
                 <Tooltip title={name}>
@@ -71,7 +71,7 @@ const BlurredCard: React.FC<{
             </div>
           </div>
           <span
-            className={cls({
+            className={cls('shrink-0', {
               hidden: rightTopHover,
               'group-hover:block': rightTopHover,
             })}

web/new-components/layout/Construct.tsx

@@ -56,10 +56,16 @@ function ConstructLayout({ children }: { children: React.ReactNode }) {
       icon: <PartitionOutlined />,
       path: '/knowledge',
     },
+    // {
+    //   key: 'agent',
+    //   name: t('Plugins'),
+    //   path: '/agent',
+    //   icon: <BuildOutlined />,
+    // },
     {
-      key: 'agent',
+      key: 'dbgpts',
-      name: t('Plugins'),
+      name: t('dbgpts_community'),
-      path: '/agent',
+      path: '/dbgpts',
       icon: <BuildOutlined />,
     },
     {

web/pages/construct/agent/index.tsx

@@ -94,7 +94,6 @@ function Agent() {
       label: t('My_Plugins'),
     },
   ];
-  console.log(agents);
 
   return (
     <ConstructLayout>

web/pages/construct/dbgpts/index.tsx

@@ -0,0 +1,254 @@
+import ConstructLayout from '@/new-components/layout/Construct';
+import MarketPlugins from '@/components/agent/market-plugins';
+import MyPlugins from '@/components/agent/my-plugins';
+import { IAgentPlugin, PostAgentQueryParams } from '@/types/agent';
+import { ClearOutlined, DownloadOutlined, PlusOutlined, SearchOutlined, SyncOutlined } from '@ant-design/icons';
+import { useRequest } from 'ahooks';
+import { Button, Input, Segmented, SegmentedProps, Tabs, Form, message, Spin, Tag } from 'antd';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { apiInterceptors, postDbgptsHubUpdate, postDbgptsInstall, postDbgptsQuery, postDbgptsUninstall, postDbgptsMy } from '@/client/api';
+import { useTranslation } from 'react-i18next';
+import BlurredCard, { ChatButton } from '@/new-components/common/blurredCard';
+import moment from 'moment';
+import cls from 'classnames';
+function Agent() {
+  const { t } = useTranslation();
+
+  const [searchValue, setSearchValue] = useState('');
+  const [activeKey, setActiveKey] = useState<string>('market');
+  const [uploading, setUploading] = useState(false);
+  const [isError, setIsError] = useState(false);
+  const [actionIndex, setActionIndex] = useState<number | undefined>();
+
+  const [form] = Form.useForm<PostAgentQueryParams['filter']>();
+  const [typeStr, setTypeStr] = useState('all');
+
+  const pagination = useMemo<{ pageNo: number; pageSize: number }>(
+    () => ({
+      pageNo: 1,
+      pageSize: 20,
+    }),
+    [],
+  );
+
+  const {
+    data: agents = [],
+    loading,
+    refresh,
+  } = useRequest<IAgentPlugin[], []>(
+    async () => {
+      if (activeKey === 'my') {
+        const [err, res] = await apiInterceptors(postDbgptsMy({
+          name: searchValue || undefined,
+          type: typeStr === 'all' ? undefined : typeStr,
+          page_index: pagination.pageNo,
+          page_size: pagination.pageSize,
+        }));
+        setIsError(!!err);
+        return res?.items ?? [];
+      }
+      const queryParams: PostAgentQueryParams = {
+        page_index: pagination.pageNo,
+        page_size: pagination.pageSize,
+        name: searchValue || undefined,
+        type: typeStr === 'all' ? undefined : typeStr,
+      };
+      const [err, res] = await apiInterceptors(postDbgptsQuery(queryParams));
+      setIsError(!!err);
+      return res?.items ?? [];
+    },
+    {
+      manual: true,
+    },
+  );
+
+  const updateFromGithub = async () => {
+    try {
+      setUploading(true);
+      const [err] = await apiInterceptors(postDbgptsHubUpdate());
+      if (err) return;
+      message.success('success');
+      refresh();
+    } finally {
+      setUploading(false);
+    }
+  };
+  useEffect(() => {
+    refresh();
+  }, [activeKey, typeStr]);
+  const pluginAction = useCallback(
+    async (name: string, index: number, isInstall: boolean) => {
+      if (actionIndex) return;
+      setActionIndex(index);
+      const [err] = await apiInterceptors((isInstall ? postDbgptsInstall : postDbgptsUninstall)(name));
+      if (!err) {
+        message.success('success');
+        refresh();
+      }
+      setActionIndex(undefined);
+    },
+    [actionIndex, refresh],
+  );
+  const items: SegmentedProps['options'] = [
+    {
+      value: 'market',
+      label: 'DBGPTS',
+    },
+    {
+      value: 'my',
+      label: t('my_dbgpts'),
+    },
+  ];
+
+  const typeItems: SegmentedProps['options'] = [
+    {
+      value: 'all',
+      label: t('All'),
+    },
+    {
+      value: 'workflow',
+      label: t('workflow'),
+    },
+    {
+      value: 'agents',
+      label: 'Agent',
+    },
+    {
+      value: 'resources',
+      label: t('resources'),
+    },
+    {
+      value: 'apps',
+      label: t('app'),
+    },
+    {
+      value: 'operators',
+      label: t('operators'),
+    },
+  ];
+
+  const logoUrl = { 
+    workflow: '/pictures/flow.png',
+    agents: '/pictures/agent.png',
+    resources: '/pictures/database.png',
+    apps: '/pictures/app.png',
+    operators: '/pictures/knowledge.png',
+  }
+
+  return (
+    <ConstructLayout>
+      <div className="px-6">
+        <Spin spinning={loading}>
+          <div className="flex justify-between items-center mb-6">
+            <div className="flex items-center gap-4">
+              <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={items}
+                onChange={(key) => {
+                  setActiveKey(key as string);
+                }}
+                value={activeKey}
+              />
+              {/* <Input
+                variant="filled"
+                prefix={<SearchOutlined />}
+                placeholder={t('please_enter_the_keywords')}
+                value={searchValue}
+                onChange={(e) => setSearchValue(e.target.value)}
+                onPressEnter={refresh}
+                allowClear
+                className="w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60"
+              /> */}
+            </div>
+            <div className="flex items-center gap-4">
+              <Button
+                className={cls('border-none text-white bg-button-gradient h-full', {
+                  'opacity-40': false,
+                })}
+                loading={uploading}
+                icon={<SyncOutlined />}
+                onClick={updateFromGithub}
+              >
+                {t('Refresh_dbgpts')}
+              </Button>
+            </div>
+          </div>
+          <div className='flex justify-start'>
+            <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}
+              onChange={(key) => {
+                setTypeStr(key as string);
+              }}
+              value={typeStr}
+            />
+            <Input
+              variant="filled"
+              prefix={<SearchOutlined />}
+              placeholder={t('please_enter_the_keywords')}
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              onPressEnter={refresh}
+              allowClear
+              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'>
+            {agents.map((agent, index) => (
+              <BlurredCard
+                logo={logoUrl[agent.type]}
+                onClick={() => {
+                  if (agent.storage_url) window.open(agent.storage_url, '_blank');
+                }}
+                description={agent.description}
+                name={agent.name}
+                key={agent.id}
+                Tags={
+                  <div>
+                    {agent.author && <Tag>{agent.author}</Tag>}
+                    {agent.version && <Tag>v{agent.version}</Tag>}
+                    {/* {agent.type && <Tag>Type {agent.type}</Tag>} */}
+                    {agent.storage_channel && <Tag>{agent.storage_channel}</Tag>}
+                  </div>
+                }
+                LeftBottom={
+                  <div className="flex gap-2">
+                    {agent.author && <span>{agent.author}</span>}
+                    {agent.author && <span>•</span>}
+                    {agent?.gmt_created && <span>{moment(agent?.gmt_created).fromNow() + ' ' + t('update')}</span>}
+                  </div>
+                }
+                RightTop={
+                  agent.type && <Tag>{agent.type}</Tag>
+                }
+                rightTopHover={false}
+                RightBottom={
+                  agent.installed || activeKey == 'my' ? (
+                    <ChatButton
+                      Icon={<ClearOutlined />}
+                      text="Uninstall"
+                      onClick={() => {
+                        pluginAction(agent.name, index, false);
+                      }}
+                    />
+                  ) : (
+                    <ChatButton
+                      Icon={<DownloadOutlined />}
+                      text="Install"
+                      onClick={() => {
+                        pluginAction(agent.name, index, true);
+                      }}
+                    />
+                  )
+                }
+              />
+            ))}
+          </div>
+          {/* {activeKey !== 'market' ? <MyPlugins /> : <MarketPlugins />} */}
+        </Spin>
+      </div>
+    </ConstructLayout>
+  );
+}
+
+export default Agent;

web/types/agent.ts

@@ -6,9 +6,8 @@ export type PostAgentHubUpdateParams = {
 };
 
 export type PostAgentQueryParams = {
-  page_index: number;
+  page_index?: number;
-  page_size: number;
+  page_size?: number;
-  filter?: {
   name?: string;
   description?: string;
   author?: string;
@@ -17,7 +16,13 @@ export type PostAgentQueryParams = {
   version?: string;
   storage_channel?: string;
   storage_url?: string;
-  };
+};
+
+export type PostDbgptMyQueryParams = {
+  type: string | undefined;
+  name: string | undefined;
+  page_index: number;
+  page_size: number;
 };
 
 export type IAgentPlugin = {
@@ -41,6 +46,7 @@ export type PostAgentPluginResponse = {
   total_page: number;
   total_row_count: number;
   datas: IAgentPlugin[];
+  items: IAgentPlugin[];
 };
 
 export type IMyPlugin = {
@@ -56,9 +62,12 @@ export type IMyPlugin = {
   use_count: number;
   created_at: string;
   description: string;
+  data?: any; 
 };
 
-export type PostAgentMyPluginResponse = IMyPlugin[];
+export type PostAgentMyPluginResponse = {
+  items: IMyPlugin[];
+}
 
 export type GetDBGPTsListResponse = {
   app_code: string;