difizen · BroKun · Aug 7, 2024 · Aug 6, 2024
diff --git a/web/ui/src/modules/agent/agent-config-manager.ts b/web/ui/src/modules/agent/agent-config-manager.ts
@@ -1,12 +1,27 @@
 import { inject, singleton } from '@difizen/mana-app';
 
+import { AxiosClient } from '../axios-client/index.js';
+
 import type { AgentConfig, AgentConfigOption } from './protocol.js';
 import { AgentConfigFactory } from './protocol.js';
 
+import { DefaultAgentConfigOptions } from './index.js';
+
 @singleton()
 export class AgentConfigManager {
   @inject(AgentConfigFactory) configFactory: AgentConfigFactory;
-  create = (option: AgentConfigOption): AgentConfig => {
-    return this.configFactory(option);
-  };
+  @inject(AxiosClient) axios: AxiosClient;
+
+  async getConfigOption({ id }: { id: string }) {
+    const res = await this.axios.get<AgentConfigOption>(`/api/v1/agents/${id}`);
+    if (res.status === 200) {
+      return res.data;
+    }
+    throw new Error('get config option failed');
+  }
+
+  create({ id }: { id: string }): AgentConfig {
+    this.getConfigOption({ id: id });
+    return this.configFactory(DefaultAgentConfigOptions);
+  }
 }
diff --git a/web/ui/src/modules/agent/agent-config.ts b/web/ui/src/modules/agent/agent-config.ts
@@ -1,20 +1,29 @@
-import { inject, transient } from '@difizen/mana-app';
+import { inject, prop, transient } from '@difizen/mana-app';
 
 import { AxiosClient } from '../axios-client/index.js';
 
 import type { LLMMeta, PlannerMeta, PromptMeta, ToolMeta } from './protocol.js';
 import { AgentConfigOption } from './protocol.js';
 
+export const DefaultAgentConfigOptions: AgentConfigOption = {
+  knowledge: [],
+};
+
 @transient()
 export class AgentConfig {
   protected axios: AxiosClient;
   isDraft = true;
 
-  llm?: LLMMeta;
-  prompt?: PromptMeta;
-  memory?: string;
-  planner?: PlannerMeta;
-  tool?: ToolMeta[];
+  @prop()
+  llm: LLMMeta;
+
+  @prop()
+  prompt: PromptMeta;
+  memory: string;
+  planner: PlannerMeta;
+
+  @prop()
+  tool: ToolMeta[];
 
   option: AgentConfigOption;
 
@@ -29,10 +38,22 @@ export class AgentConfig {
   }
 
   protected fromMeta(option: AgentConfigOption = this.option) {
-    this.prompt = option.prompt;
-    this.llm = option.llm;
-    this.memory = option.memory;
-    this.planner = option.planner;
-    this.tool = option.tool;
+    this.prompt = option.prompt ?? {
+      instruction: '',
+      introduction: '',
+      target: '',
+    };
+    this.llm = option.llm ?? {
+      id: '',
+      nickname: '',
+      temperature: 0,
+      model_name: ['gptx'],
+    };
+    this.memory = option.memory ?? '';
+    this.planner = option.planner ?? {
+      id: '',
+      nickname: 'string',
+    };
+    this.tool = option.tool ?? [];
   }
 }
diff --git a/web/ui/src/modules/app.module.ts b/web/ui/src/modules/app.module.ts
@@ -1,5 +1,6 @@
 import { ManaModule } from '@difizen/mana-app';
 
+import { AgentConfigPageModule } from '../views/agent-config/index.js';
 import { AgentChatModule } from '../views/agent-dev/index.js';
 import { AgentsPageModule } from '../views/agents/index.js';
 import { ChatViewModule } from '../views/chat/module.js';
@@ -17,13 +18,15 @@ export const AppBaseModule = new ManaModule().dependOn(
   AgentModule,
   SessionModule,
   ChatMessageModule,
-
   PortalsModule,
   AgentsPageModule,
   AgentChatModule,
   SessionsViewModule,
   ChatViewModule,
   ToolPageModule,
+  AgentConfigPageModule,
+  PortalsModule,
+  AgentsPageModule,
 );
 
 export default AppBaseModule;
diff --git a/web/ui/src/views/agent-config/app.ts b/web/ui/src/views/agent-config/app.ts
@@ -0,0 +1,18 @@
+import { ConfigurationService } from '@difizen/mana-app';
+import { SlotViewManager } from '@difizen/mana-app';
+import { ApplicationContribution, ViewManager } from '@difizen/mana-app';
+import { inject, singleton } from '@difizen/mana-app';
+
+import { ModelManager } from '../../modules/model/index.js';
+
+@singleton({ contrib: ApplicationContribution })
+export class AgentConfigBotApp implements ApplicationContribution {
+  @inject(ModelManager) modelManager: ModelManager;
+  @inject(ViewManager) viewManager: ViewManager;
+  @inject(SlotViewManager) slotViewManager: SlotViewManager;
+  @inject(ConfigurationService) configurationService: ConfigurationService;
+
+  async onStart() {
+    document.title = `magent-ui`;
+  }
+}
diff --git a/web/ui/src/views/agent-config/components/CharacterSetting/index.less b/web/ui/src/views/agent-config/components/CharacterSetting/index.less
@@ -0,0 +1,23 @@
+.character-settings {
+  &-header {
+    color: rgba(1, 1, 1, 88%);
+    margin-top: 16px;
+  }
+
+  &-container {
+    padding: 0;
+    border-right: 1px solid #eee;
+  }
+
+  &-body {
+    padding: 16px 16px 0 0;
+  }
+
+  &-textarea {
+    &.ant-input {
+      resize: none;
+      height: 300px;
+      border: none;
+    }
+  }
+}
diff --git a/web/ui/src/views/agent-config/components/CharacterSetting/index.tsx b/web/ui/src/views/agent-config/components/CharacterSetting/index.tsx
@@ -0,0 +1,79 @@
+import './index.less';
+import { HighlightTwoTone } from '@ant-design/icons';
+import { Input } from 'antd';
+
+const clsPrefix = 'character-settings';
+
+export const CharacterSetting = ({
+  values = {
+    introduction: '',
+    target: '',
+    instruction: '',
+  },
+  onChange,
+}: {
+  values: {
+    introduction: string;
+    target: string;
+    instruction: string;
+  };
+  onChange: (values: {
+    introduction: string;
+    target: string;
+    instruction: string;
+  }) => void;
+}) => {
+  const { introduction, target, instruction } = values;
+  return (
+    <div className={`${clsPrefix}-container`}>
+      <div className={`${clsPrefix}-header`}>
+        <HighlightTwoTone style={{ marginRight: 8 }} />
+        人设
+      </div>
+      <div className={`${clsPrefix}-body`}>
+        <Input.TextArea
+          value={instruction}
+          onChange={(e) => {
+            onChange({
+              ...values,
+              instruction: e.target.value,
+            });
+          }}
+          className={`${clsPrefix}-textarea`}
+        ></Input.TextArea>
+      </div>
+      <div className={`${clsPrefix}-header`}>
+        <HighlightTwoTone style={{ marginRight: 8 }} />
+        目标
+      </div>
+      <div className={`${clsPrefix}-body`}>
+        <Input.TextArea
+          value={target}
+          onChange={(e) => {
+            onChange({
+              ...values,
+              target: e.target.value,
+            });
+          }}
+          className={`${clsPrefix}-textarea`}
+        ></Input.TextArea>
+      </div>
+      <div className={`${clsPrefix}-header`}>
+        <HighlightTwoTone style={{ marginRight: 8 }} />
+        要求
+      </div>
+      <div className={`${clsPrefix}-body`}>
+        <Input.TextArea
+          value={introduction}
+          onChange={(e) => {
+            onChange({
+              ...values,
+              introduction: e.target.value,
+            });
+          }}
+          className={`${clsPrefix}-textarea`}
+        ></Input.TextArea>
+      </div>
+    </div>
+  );
+};
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
@@ -0,0 +1,109 @@
+import type { TableColumnsType } from 'antd';
+import { Modal, Table } from 'antd';
+import { useState } from 'react';
+
+interface DataType {
+  key: React.Key;
+  id: string;
+  nickname: string;
+  avatar: number;
+  description: string;
+  address: string;
+  added: boolean;
+}
+
+export const KnowledgeModal = ({
+  open,
+  onCancel,
+}: {
+  open: boolean;
+  onCancel: () => 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',
+      },
+      {
+        title: 'id',
+        dataIndex: 'id',
+        key: 'id',
+      },
+      {
+        title: 'avatar',
+        dataIndex: 'avatar',
+        key: 'avatar',
+      },
+      {
+        title: 'description',
+        dataIndex: 'description',
+        key: 'description',
+      },
+      {
+        title: 'description',
+        dataIndex: 'description',
+        key: 'description',
+      },
+      {
+        title: 'added',
+        dataIndex: 'added',
+        key: 'added',
+        render: (text: boolean) => {
+          return text ? '是' : '否';
+        },
+      },
+    ];
+    return {
+      dataSource,
+      columns,
+    };
+  }
+
+  const { dataSource, columns } = useKnowledgeTable();
+
+  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
+    setSelectedRowKeys(newSelectedRowKeys);
+  };
+
+  const rowSelection: TableRowSelection<DataType> = {
+    selectedRowKeys,
+    onChange: onSelectChange,
+  };
+
+  const hasSelected = selectedRowKeys.length > 0;
+
+  return (
+    <Modal width={760} title="选择知识库" open={open} onCancel={() => onCancel()}>
+      <Table<DataType>
+        rowSelection={rowSelection}
+        dataSource={dataSource}
+        columns={columns}
+        rowKey={'id'}
+      ></Table>
+    </Modal>
+  );
+};
diff --git a/web/ui/src/views/agent-config/components/ConfigList/OpeningSpeechInput/index.less b/web/ui/src/views/agent-config/components/ConfigList/OpeningSpeechInput/index.less
@@ -0,0 +1,9 @@
+.opening-speech-input {
+  &-textarea {
+    &.ant-input {
+      resize: none;
+      min-height: 120px;
+      border: none;
+    }
+  }
+}
diff --git a/web/ui/src/views/agent-config/components/ConfigList/OpeningSpeechInput/index.tsx b/web/ui/src/views/agent-config/components/ConfigList/OpeningSpeechInput/index.tsx
@@ -0,0 +1,23 @@
+import { Input } from 'antd';
+import React from 'react';
+
+import './index.less';
+const clsPrefix = 'opening-speech-input';
+
+export const OpeningSpeechInput = ({
+  value,
+  onChange,
+}: {
+  value?: string;
+  onChange?: (value: string) => void;
+}) => {
+  return (
+    <Input.TextArea
+      className={`${clsPrefix}-textarea`}
+      value={value}
+      onChange={(e) => {
+        onChange?.(e.target.value);
+      }}
+    ></Input.TextArea>
+  );
+};