difizen · BroKun · Aug 8, 2024 · Aug 8, 2024
diff --git a/web/ui/src/modules/agent/agent-model.ts b/web/ui/src/modules/agent/agent-model.ts
@@ -1,4 +1,5 @@
-import { Deferred, inject, prop, transient } from '@difizen/mana-app';
+import { inject, prop, transient } from '@difizen/mana-app';
+import { message } from 'antd';
 
 import { AsyncModel } from '../../common/async-model.js';
 import { AxiosClient } from '../axios-client/index.js';
@@ -7,7 +8,13 @@ import { ToolManager } from '../tool/index.js';
 
 import { AgentConfigManager } from './agent-config-manager.js';
 import type { AgentConfig } from './agent-config.js';
-import type { LLMMeta, PromptMeta, PlannerMeta, ToolMeta } from './protocol.js';
+import type {
+  LLMMeta,
+  PromptMeta,
+  PlannerMeta,
+  ToolMeta,
+  KnowledgeMeta,
+} from './protocol.js';
 import { AgentModelType, AgentModelOption } from './protocol.js';
 
 class Prompt implements PromptMeta {
@@ -36,6 +43,8 @@ class Prompt implements PromptMeta {
 
 @transient()
 export class AgentModel extends AsyncModel<AgentModel, AgentModelOption> {
+  @inject(ToolManager) toolManager: ToolManager;
+
   axios: AxiosClient;
   // configManager: AgentConfigManager;
 
@@ -70,38 +79,73 @@ export class AgentModel extends AsyncModel<AgentModel, AgentModelOption> {
   @prop()
   openingSpeech?: string;
 
+  /**
+   * ------
+   * Tools
+   * ------
+   */
+
   @prop()
-  tool: ToolMeta[];
+  allTools: ToolMeta[] = [];
 
-  @inject(ToolManager) toolManager: ToolManager;
+  @prop()
+  tool: ToolMeta[] = [];
 
   @prop()
-  toolList: ToolModel[] = [];
+  allToolsLoading = false;
 
+  /**
+   * ------
+   * Knowledge
+   * ------
+   */
   @prop()
-  toolListLoading = false;
+  selectedKnowledge: KnowledgeMeta[] = [];
 
   @prop()
-  selectedKnowledgeList: ToolModel[] = [];
+  knowledges: KnowledgeMeta[] = [];
+
+  @prop()
+  knowledgesLoading = false;
 
   async updateToolList() {
     try {
-      this.toolListLoading = true;
+      this.allToolsLoading = true;
       const options = await this.toolManager.getTools();
-      this.toolList = options.map(this.toolManager.getOrCreateTool);
+      this.allTools = options;
     } finally {
-      this.toolListLoading = false;
+      this.allToolsLoading = false;
     }
   }
 
   updateSelectedToolList(ids: React.Key[]) {
-    this.tool = this.toolList.filter((item) => ids.includes(item.id));
+    this.tool = this.allTools.filter((item) => ids.includes(item.id));
   }
 
   removeSelectedToolList(ids: React.Key[]) {
     this.tool = this.tool.filter((item) => !ids.includes(item.id));
   }
 
+  async updateKnowledgeList() {
+    try {
+      this.knowledgesLoading = true;
+      const options = await this.fetchKnowdledgeList();
+      this.knowledges = options;
+    } finally {
+      this.knowledgesLoading = false;
+    }
+  }
+
+  updateSelectedKnowledgeList(ids: React.Key[]) {
+    this.selectedKnowledge = this.knowledges.filter((item) => ids.includes(item.id));
+  }
+
+  removeSelectedKnowledgeList(ids: React.Key[]) {
+    this.selectedKnowledge = this.selectedKnowledge.filter(
+      (item) => !ids.includes(item.id),
+    );
+  }
+
   // protected draftDeferred = new Deferred<AgentConfig>();
 
   // get draftReady() {
@@ -187,6 +231,7 @@ export class AgentModel extends AsyncModel<AgentModel, AgentModelOption> {
       tool: this.tool,
       memory: this.memory,
       opening_speech: this.openingSpeech,
+      knowledge: this.selectedKnowledge,
     };
   }
 
@@ -204,4 +249,22 @@ export class AgentModel extends AsyncModel<AgentModel, AgentModelOption> {
     }
     return false;
   }
+
+  async fetchKnowdledgeList() {
+    try {
+      const res = await this.axios.put<KnowledgeMeta[]>(`/api/v1/knowledge`);
+      if (res.status === 200 && res.data?.length) {
+        return res.data;
+      }
+    } catch (e) {
+      console.error('获取知识库失败');
+    }
+    return [
+      {
+        id: 'string',
+        nickname: '测试知识库',
+        description: '测试知识库',
+      },
+    ];
+  }
 }
diff --git a/web/ui/src/modules/agent/protocol.ts b/web/ui/src/modules/agent/protocol.ts
@@ -12,6 +12,12 @@ export interface ToolMeta {
   description?: string;
   parameters: any[];
 }
+
+export interface KnowledgeMeta {
+  id: string;
+  nickname: string;
+  description: string;
+}
 export interface PlannerMeta {
   id: string;
   nickname: string;

diff --git a/web/ui/src/views/agent-config/components/ConfigList/KnowledgeModal/index.tsx b/web/ui/src/views/agent-config/components/ConfigList/KnowledgeModal/index.tsx
@@ -1,106 +1,84 @@
 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 } from 'react';
 
-interface DataType {
-  key: React.Key;
-  id: string;
-  nickname: string;
-  avatar: number;
-  description: string;
-  address: string;
-  added: boolean;
-}
+import type { KnowledgeMeta } from '../../../../../modules/agent/protocol.js';
 
 export const KnowledgeModal = ({
+  dataSource,
   open,
   onCancel,
+  onOk,
+  loading,
+  selectedRowKeys = [],
+  setSelectedRowKeys,
 }: {
   open: boolean;
+  dataSource: KnowledgeMeta[];
   onCancel: () => void;
+  onOk: (selectedRowKeys: React.Key[]) => void;
+  loading: boolean;
+  selectedRowKeys: React.Key[];
+  setSelectedRowKeys: (selectedRowKeys: React.Key[]) => void;
 }) => {
-  function useKnowledgeTable() {
-    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<KnowledgeMeta> = [
       {
         title: 'id',
         dataIndex: 'id',
         key: 'id',
       },
+
       {
         title: 'avatar',
         dataIndex: 'avatar',
         key: 'avatar',
+        render(value) {
+          return <Avatar shape="circle" size={32} src={value} />;
+        },
       },
       {
-        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 } = useKnowledgeTable();
+    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);
   };
 
-  const rowSelection: TableRowSelection<DataType> = {
+  const rowSelection: TableRowSelection<KnowledgeMeta> = {
     selectedRowKeys,
     onChange: onSelectChange,
   };
 
-  const hasSelected = selectedRowKeys.length > 0;
-
   return (
-    <Modal width={760} title="选择知识库" open={open} onCancel={() => onCancel()}>
-      <Table<DataType>
+    <Modal
+      width={1080}
+      title="选择知识库"
+      open={open}
+      onOk={() => {
+        onOk(selectedRowKeys);
+      }}
+      onCancel={() => onCancel()}
+      loading={loading}
+    >
+      <Table<KnowledgeMeta>
         rowSelection={rowSelection}
-        dataSource={dataSource}
+        dataSource={dataSource || []}
         columns={columns}
         rowKey={'id'}
       ></Table>

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,20 +1,10 @@
-import { useInject, useMount, ViewInstance } from '@difizen/mana-app';
 import type { TableColumnsType } from 'antd';
 import { Avatar, Modal, Table } from 'antd';
 import type { TableRowSelection } from 'antd/es/table/interface.js';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 
-import { AgentConfig } from '../../../../../modules/agent/agent-config.js';
+import type { ToolMeta } from '../../../../../modules/agent/index.js';
 import { ToolIcon } from '../../../../tool/tool-icon.js';
-import type { AgentConfigView } from '../../../view.js';
-
-interface DataType {
-  id: string;
-  nickname: string;
-  avatar: string;
-  description: string;
-  parameters: string[];
-}
 
 export const ToolModal = ({
   dataSource,
@@ -26,15 +16,15 @@ export const ToolModal = ({
   setSelectedRowKeys,
 }: {
   open: boolean;
-  dataSource: DataType[];
+  dataSource: ToolMeta[];
   onCancel: () => void;
   onOk: (selectedRowKeys: React.Key[]) => void;
   loading: boolean;
   selectedRowKeys: React.Key[];
   setSelectedRowKeys: (selectedRowKeys: React.Key[]) => void;
 }) => {
   const columns = useMemo(() => {
-    const c: TableColumnsType<DataType> = [
+    const c: TableColumnsType<ToolMeta> = [
       {
         title: 'id',
         dataIndex: 'id',
@@ -71,7 +61,7 @@ export const ToolModal = ({
     setSelectedRowKeys(newSelectedRowKeys);
   };
 
-  const rowSelection: TableRowSelection<DataType> = {
+  const rowSelection: TableRowSelection<ToolMeta> = {
     selectedRowKeys,
     onChange: onSelectChange,
   };
@@ -87,7 +77,7 @@ export const ToolModal = ({
       onCancel={() => onCancel()}
       loading={loading}
     >
-      <Table<DataType>
+      <Table<ToolMeta>
         rowSelection={rowSelection}
         dataSource={dataSource || []}
         columns={columns}