feat: select tool

difizen · Aug 8, 2024 · fa1bc7f · fa1bc7f
1 parent a53346e
commit fa1bc7f
Show file tree

Hide file tree

Showing 6 changed files with 193 additions and 108 deletions.
diff --git a/web/ui/src/modules/agent/agent-model.ts b/web/ui/src/modules/agent/agent-model.ts
@@ -2,6 +2,8 @@ import { Deferred, inject, prop, transient } from '@difizen/mana-app';
 
 import { AsyncModel } from '../../common/async-model.js';
 import { AxiosClient } from '../axios-client/index.js';
+import type { ToolModel } from '../tool/index.js';
+import { ToolManager } from '../tool/index.js';
 
 import { AgentConfigManager } from './agent-config-manager.js';
 import type { AgentConfig } from './agent-config.js';
@@ -71,6 +73,35 @@ export class AgentModel extends AsyncModel<AgentModel, AgentModelOption> {
   @prop()
   tool: ToolMeta[];
 
+  @inject(ToolManager) toolManager: ToolManager;
+
+  @prop()
+  toolList: ToolModel[] = [];
+
+  @prop()
+  toolListLoading = false;
+
+  @prop()
+  selectedKnowledgeList: ToolModel[] = [];
+
+  async updateToolList() {
+    try {
+      this.toolListLoading = true;
+      const options = await this.toolManager.getTools();
+      this.toolList = options.map(this.toolManager.getOrCreateTool);
+    } finally {
+      this.toolListLoading = false;
+    }
+  }
+
+  updateSelectedToolList(ids: React.Key[]) {
+    this.tool = this.toolList.filter((item) => ids.includes(item.id));
+  }
+
+  removeSelectedToolList(ids: React.Key[]) {
+    this.tool = this.tool.filter((item) => !ids.includes(item.id));
+  }
+
   // protected draftDeferred = new Deferred<AgentConfig>();
 
   // get draftReady() {

diff --git a/web/ui/src/modules/agent/module.ts b/web/ui/src/modules/agent/module.ts
@@ -1,5 +1,7 @@
 import { ManaModule } from '@difizen/mana-app';
 
+import { ToolManager, ToolModel } from '../tool/index.js';
+
 import { AgentConfigManager } from './agent-config-manager.js';
 import { AgentConfig } from './agent-config.js';
 import { AgentManager } from './agent-manager.js';
@@ -18,7 +20,6 @@ export const AgentBotModule = ManaModule.create().register(
   AgentConfig,
   AgentConfigManager,
   AgentMarket,
-
   {
     token: AgentConfigFactory,
     useFactory: (ctx) => {

diff --git a/web/ui/src/views/agent-config/components/ConfigList/ToolModal/index.tsx b/web/ui/src/views/agent-config/components/ConfigList/ToolModal/index.tsx
@@ -1,89 +1,71 @@
+import { useInject, useMount, ViewInstance } from '@difizen/mana-app';
 import type { TableColumnsType } from 'antd';
-import { Modal, Table } from 'antd';
-import { useState } from 'react';
+import { Avatar, Modal, Table } from 'antd';
+import type { TableRowSelection } from 'antd/es/table/interface.js';
+import { useMemo, useState } from 'react';
+
+import { AgentConfig } from '../../../../../modules/agent/agent-config.js';
+import { ToolIcon } from '../../../../tool/tool-icon.js';
+import type { AgentConfigView } from '../../../view.js';
 
 interface DataType {
-  key: React.Key;
   id: string;
   nickname: string;
-  avatar: number;
+  avatar: string;
   description: string;
-  address: string;
-  added: boolean;
+  parameters: string[];
 }
 
 export const ToolModal = ({
+  dataSource,
   open,
   onCancel,
+  onOk,
+  loading,
+  selectedRowKeys = [],
+  setSelectedRowKeys,
 }: {
   open: boolean;
+  dataSource: DataType[];
   onCancel: () => void;
+  onOk: (selectedRowKeys: React.Key[]) => void;
+  loading: boolean;
+  selectedRowKeys: React.Key[];
+  setSelectedRowKeys: (selectedRowKeys: React.Key[]) => void;
 }) => {
-  function useToolTable() {
-    const dataSource = [
-      {
-        id: '1',
-        nickname: '胡彦斌',
-        avatar: 32,
-        description: '西湖区湖底公园1号',
-        address: '西湖区湖底公园1号',
-        added: true,
-      },
-      {
-        id: '2',
-        nickname: '胡彦斌',
-        avatar: 32,
-        description: '西湖区湖底公园1号',
-        address: '西湖区湖底公园1号',
-        added: true,
-      },
-    ] as DataType[];
-
-    const columns: TableColumnsType<DataType> = [
-      {
-        title: 'nickname',
-        dataIndex: 'nickname',
-        key: 'nickname',
-      },
+  const columns = useMemo(() => {
+    const c: TableColumnsType<DataType> = [
       {
         title: 'id',
         dataIndex: 'id',
         key: 'id',
       },
+
       {
         title: 'avatar',
         dataIndex: 'avatar',
         key: 'avatar',
+        render(value) {
+          return <Avatar shape="circle" size={32} src={value || <ToolIcon />} />;
+        },
       },
       {
-        title: 'description',
-        dataIndex: 'description',
-        key: 'description',
+        title: 'nickname',
+        dataIndex: 'nickname',
+        key: 'nickname',
       },
+
       {
         title: 'description',
         dataIndex: 'description',
         key: 'description',
       },
-      {
-        title: 'added',
-        dataIndex: 'added',
-        key: 'added',
-        render: (text: boolean) => {
-          return text ? '是' : '否';
-        },
-      },
     ];
-    return {
-      dataSource,
-      columns,
-    };
-  }
-
-  const { dataSource, columns } = useToolTable();
+    return c;
+  }, []);
 
-  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
-  const [loading, setLoading] = useState(false);
+  // const [selectedRowKeys, setSelectedRowKeys] =
+  //   useState<React.Key[]>(defaultSelectedRowKeys);
 
   const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
     setSelectedRowKeys(newSelectedRowKeys);
@@ -94,13 +76,20 @@ export const ToolModal = ({
     onChange: onSelectChange,
   };
 
-  const hasSelected = selectedRowKeys.length > 0;
-
   return (
-    <Modal width={760} title="选择知识库" open={open} onCancel={() => onCancel()}>
+    <Modal
+      width={1080}
+      title="选择Tools"
+      open={open}
+      onOk={() => {
+        onOk(selectedRowKeys);
+      }}
+      onCancel={() => onCancel()}
+      loading={loading}
+    >
       <Table<DataType>
         rowSelection={rowSelection}
-        dataSource={dataSource}
+        dataSource={dataSource || []}
         columns={columns}
         rowKey={'id'}
       ></Table>