feat: add dbgpts community

2025-09-11 13:58:58 +00:00 · 2024-08-26 09:34:01 +08:00
parent c1e64e88ea
commit 7ebb2dfb2d
8 changed files with 331 additions and 20 deletions
--- a/web/client/api/request.ts
+++ b/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,
--- a/web/locales/en/common.ts
+++ b/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;
--- a/web/locales/zh/common.ts
+++ b/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;
--- a/web/new-components/common/blurredCard/index.tsx
+++ b/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,
            })}
--- a/web/new-components/layout/Construct.tsx
+++ b/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',
-      name: t('Plugins'),
-      path: '/agent',
+      key: 'dbgpts',
+      name: t('dbgpts_community'),
+      path: '/dbgpts',
      icon: <BuildOutlined />,
    },
    {
--- a/web/pages/construct/agent/index.tsx
+++ b/web/pages/construct/agent/index.tsx
@@ -94,7 +94,6 @@ function Agent() {
      label: t('My_Plugins'),
    },
  ];
-  console.log(agents);

  return (
    <ConstructLayout>
--- a/web/pages/construct/dbgpts/index.tsx
+++ b/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;
--- a/web/types/agent.ts
+++ b/web/types/agent.ts
@@ -6,18 +6,23 @@ export type PostAgentHubUpdateParams = {
 };

 export type PostAgentQueryParams = {
+  page_index?: number;
+  page_size?: number;
+  name?: string;
+  description?: string;
+  author?: string;
+  email?: string;
+  type?: string;
+  version?: string;
+  storage_channel?: string;
+  storage_url?: string;
+};
+
+export type PostDbgptMyQueryParams = {
+  type: string | undefined;
+  name: string | undefined;
  page_index: number;
  page_size: number;
-  filter?: {
-    name?: string;
-    description?: string;
-    author?: string;
-    email?: string;
-    type?: string;
-    version?: string;
-    storage_channel?: string;
-    storage_url?: string;
-  };
 };

 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;