mirror of
https://github.com/tencentmusic/supersonic.git
synced 2025-12-11 12:07:42 +00:00
[improvement][headless-fe] agent setting update (#1240)
* [improvement][semantic-fe] Add model alias setting & Add view permission restrictions to the model permission management tab. [improvement][semantic-fe] Add permission control to the action buttons for the main domain; apply high sensitivity filtering to the authorization of metrics/dimensions. [improvement][semantic-fe] Optimize the editing mode in the dimension/metric/datasource components to use the modelId stored in the database for data, instead of relying on the data from the state manager. * [improvement][semantic-fe] Add time granularity setting in the data source configuration. * [improvement][semantic-fe] Dictionary import for dimension values supported in Q&A visibility * [improvement][semantic-fe] Modification of data source creation prompt wording" * [improvement][semantic-fe] metric market experience optimization * [improvement][semantic-fe] enhance the analysis of metric trends * [improvement][semantic-fe] optimize the presentation of metric trend permissions * [improvement][semantic-fe] add metric trend download functionality * [improvement][semantic-fe] fix the dimension initialization issue in metric correlation * [improvement][semantic-fe] Fix the issue of database changes not taking effect when creating based on an SQL data source. * [improvement][semantic-fe] Optimizing pagination logic and some CSS styles * [improvement][semantic-fe] Fixing the API for the indicator list by changing "current" to "pageNum" * [improvement][semantic-fe] Fixing the default value setting for the indicator list * [improvement][semantic-fe] Adding batch operations for indicators/dimensions/models * [improvement][semantic-fe] Replacing the single status update API for indicators/dimensions with a batch update API * [improvement][semantic-fe] Redesigning the indicator homepage to incorporate trend charts and table functionality for indicators * [improvement][semantic-fe] Optimizing the logic for setting dimension values and editing data sources, and adding system settings functionality * [improvement][semantic-fe] Upgrading antd version to 5.x, extracting the batch operation button component, optimizing the interaction for system settings, and expanding the configuration generation types for list-to-select component. * [improvement][semantic-fe] Adding the ability to filter dimensions based on whether they are tags or not. * [improvement][semantic-fe] Adding the ability to edit relationships between models in the canvas. * [improvement][semantic-fe] Updating the datePicker component to use dayjs instead. * [improvement][semantic-fe] Fixing the issue with passing the model ID for dimensions in the indicator market. * [improvement][semantic-fe] Fixing the abnormal state of the popup when creating a model. * [improvement][semantic-fe] Adding permission logic for bulk operations in the indicator market. * [improvement][semantic-fe] Adding the ability to download and transpose data. * [improvement][semantic-fe] Fixing the initialization issue with the date selection component in the indicator details page when switching time granularity. * [improvement][semantic-fe] Fixing the logic error in the dimension value setting. * [improvement][semantic-fe] Fixing the synchronization issue with the question and answer settings information. * [improvement][semantic-fe] Optimizing the canvas functionality for better performance and user experience. * [improvement][semantic-fe] Optimizing the update process for drawing model relationship edges in the canvas. * [improvement][semantic-fe] Changing the line type for canvas connections. * [improvement][semantic-fe] Replacing the initialization variable from "semantic" to "headless". * [improvement][semantic-fe] Fixing the missing migration issue for default drill-down dimension configuration in model editing. Additionally, optimizing the data retrieval method for initializing fields in the model. * [improvement][semantic-fe] Updating the logic for the fieldName. * [improvement][semantic-fe] Adjusting the position of the metrics tab. * [improvement][semantic-fe] Changing the 字段名称 to 英文名称. * [improvement][semantic-fe] Fix metric measurement deletion. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI optimization for metric details page. * [improvement][semantic-fe] UI adjustment for metric details page. * [improvement][semantic-fe] The granularity field in the time type of model editing now supports setting it as empty. * [improvement][semantic-fe] Added field type and metric type to the metric creation options. * [improvement][semantic-fe] The organization structure selection feature has been added to the permission management. * [improvement][semantic-fe] Improved user experience for the metric list. * [improvement][semantic-fe] fix update the metric list. * [improvement][headless-fe] Added view management functionality. * [improvement][headless-fe] The view management functionality has been added. This feature allows users to create, edit, and manage different views within the system. * [improvement][headless-fe] Added model editing side effect detection. * [improvement][headless-fe] Fixed the logic error in view editing. * [improvement][headless-fe] Fixed the issue with initializing dimension associations in metric settings. * [improvement][headless-fe] Added the ability to hide the Q&A settings entry point. * [improvement][headless-fe] Fixed the issue with selecting search results in metric field creation. * [improvement][headless-fe] Added search functionality to the field list in model editing. * [improvement][headless-fe] fix the field list in model editing * [improvement][headless-fe] Restructured the data for the dimension value settings interface. * [improvement][headless-fe] Added dynamic variable functionality to model creation based on SQL scripts. * [improvement][headless-fe] Added support for passing dynamic variables as parameters in the executeSql function. * [improvement][headless-fe] Resolved the issue where users were unable to select all options for dimensions, metrics, and fields in the metric generation process. * [improvement][headless-fe] Replaced the term "view" with "dataset" * [improvement][headless-fe] Added the ability to export metrics and dimensions to a specific target. * [improvement][headless-fe] Enhanced dataset creation to support the tag mode. * [improvement][headless-fe] Added tag value setting. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Optimized the tag setting system. * [improvement][headless-fe] Updated the data initialization for model editing to use API requests instead. * [improvement][headless-fe] Added search functionality to model management. * [improvement][headless-fe] Removed field null validation during model editing. * [improvement][headless-fe] Updated the batch operation button component. * [improvement][headless-fe] Optimized the logic for initializing indicators in dimension value settings. * [improvement][headless-fe] Adjusted the length of the input field for model editing names. * [improvement][headless-fe] Lock the version of the @ant-design/pro-table component and replace it with @ant-design/pro-components. * [improvement][headless-fe] Optimized the style of the metrics market and tags market. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling * [improvement][headless-fe] The quick creation of model fields now defaults to using the "comment" field for filling. * [improvement][headless-fe] Fixed the issue where the conditions for metric measurement creation were not being saved correctly. * [improvement][headless-fe] Default value setting for hiding dimensions. * [improvement][headless-fe] Updated the file imports in the project. * [improvement][headless-fe] Adjusted the logic for displaying the tab in the theme domain. * [improvement][headless-fe] Added term management functionality. * [improvement][headless-fe] When creating a model, the current metric operator now allows for clearance. * [improvement][headless-fe] Term management interface transformation * [improvement][headless-fe] Migrating scaffold version to @umi/max * [improvement][headless-fe] remove modle column * [improvement][headless-fe] 1.Added configuration for the large language model in the agent; 2.upgraded React version from 17 to 18; 3.modified some UI effects. * [improvement][headless-fe] Added a simplified mode to the question-answering system. * [improvement][headless-fe] remove pnpm-lock * [improvement][headless-fe] add pnpm-lock * [improvement][headless-fe] Fixed the issue with passing the modelId during initialization. * [improvement][headless-fe] Fixed the issue with abnormal comments during model creation. * [improvement][headless-fe] fix build bugs * [improvement][headless-fe] change build config * [improvement][headless-fe] route config change * [improvement][headless-fe] Optimized data updating when switching domains. * [improvement][headless-fe] css change * [improvement][semantic-fe] logo css change * [improvement][semantic-fe] system config add defaultValue support * [improvement][semantic-fe] tag mode wording change * [improvement][semantic-fe] fix metric edit page init error * [improvement][supersonic-fe] Updated the way chat projects are imported in supersonic-fe. * [improvement][chat-engine] Added a background silent mode for watching chat projects. * [improvement][supersonic-fe] fix proxy url * [improvement][headless-fe] agent setting update
This commit is contained in:
tristanliu
@@ -273,6 +273,12 @@ ol {
|
||||
.supersonicForm {
|
||||
padding: 0 20px;
|
||||
:global {
|
||||
.ant-form-item-label {
|
||||
.anticon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
.ant-input-search .ant-input-search-button {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import { Switch } from 'antd';
|
||||
import styles from './style.less';
|
||||
import { AgentType } from './type';
|
||||
import AgentForm from './AgentForm';
|
||||
|
||||
type Props = {
|
||||
currentAgent?: AgentType;
|
||||
onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
|
||||
onCreateToolBtnClick?: () => void;
|
||||
goBack: () => void;
|
||||
};
|
||||
|
||||
const ToolsSection: React.FC<Props> = ({
|
||||
currentAgent,
|
||||
onSaveAgent,
|
||||
onCreateToolBtnClick,
|
||||
goBack,
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.toolsSection}>
|
||||
<div className={styles.toolsSectionTitleBar}>
|
||||
<ArrowLeftOutlined className={styles.backIcon} onClick={goBack} />
|
||||
<div className={styles.agentTitle}>{currentAgent?.name}</div>
|
||||
<div className={styles.toggleStatus}>
|
||||
{currentAgent?.status === 0 ? '已禁用' : <span className={styles.online}>已启用</span>}
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
size="small"
|
||||
defaultChecked={currentAgent?.status === 1}
|
||||
onChange={(value) => {
|
||||
onSaveAgent({ ...currentAgent, status: value ? 1 : 0 }, true);
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.basicInfo}>
|
||||
<AgentForm
|
||||
onSaveAgent={onSaveAgent}
|
||||
editAgent={currentAgent}
|
||||
onCreateToolBtnClick={onCreateToolBtnClick}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToolsSection;
|
||||
@@ -16,7 +16,8 @@ import { AgentType } from './type';
|
||||
import { useEffect, useState } from 'react';
|
||||
import styles from './style.less';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import { uuid } from '@/utils/utils';
|
||||
import { uuid, jsonParse } from '@/utils/utils';
|
||||
import ToolsSection from './ToolsSection';
|
||||
import globalStyles from '@/global.less';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
@@ -25,18 +26,27 @@ const { TextArea } = Input;
|
||||
type Props = {
|
||||
editAgent?: AgentType;
|
||||
onSaveAgent: (agent: AgentType) => Promise<void>;
|
||||
onCancel: () => void;
|
||||
onCreateToolBtnClick?: () => void;
|
||||
};
|
||||
|
||||
const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
const defaultAgentConfig = {
|
||||
simpleMode: false,
|
||||
debugMode: true,
|
||||
};
|
||||
|
||||
const AgentForm: React.FC<Props> = ({ editAgent, onSaveAgent, onCreateToolBtnClick }) => {
|
||||
const [saveLoading, setSaveLoading] = useState(false);
|
||||
const [examples, setExamples] = useState<{ id: string; question?: string }[]>([]);
|
||||
const [activeKey, setActiveKey] = useState('basic');
|
||||
const [formData, setFormData] = useState<any>({
|
||||
enableSearch: true,
|
||||
llmConfig: {
|
||||
timeOut: 60,
|
||||
provider: 'OPEN_AI',
|
||||
},
|
||||
agentConfig: {
|
||||
...defaultAgentConfig,
|
||||
},
|
||||
});
|
||||
const [form] = Form.useForm();
|
||||
|
||||
@@ -46,7 +56,14 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
if (!sourceData.llmConfig) {
|
||||
delete sourceData.llmConfig;
|
||||
}
|
||||
form.setFieldsValue({ ...sourceData, enableSearch: editAgent.enableSearch !== 0 });
|
||||
|
||||
const config = jsonParse(editAgent.agentConfig, {});
|
||||
|
||||
form.setFieldsValue({
|
||||
...sourceData,
|
||||
enableSearch: editAgent.enableSearch !== 0,
|
||||
agentConfig: { ...defaultAgentConfig, ...config },
|
||||
});
|
||||
if (editAgent.examples) {
|
||||
setExamples(editAgent.examples.map((question) => ({ id: uuid(), question })));
|
||||
}
|
||||
@@ -56,7 +73,7 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
}, [editAgent]);
|
||||
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
labelCol: { span: 4 },
|
||||
wrapperCol: { span: 16 },
|
||||
// layout: 'vertical',
|
||||
};
|
||||
@@ -64,10 +81,12 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
const onOk = async () => {
|
||||
const values = await form.validateFields();
|
||||
setSaveLoading(true);
|
||||
await onSaveAgent({
|
||||
const config = jsonParse(editAgent?.agentConfig, {});
|
||||
await onSaveAgent?.({
|
||||
id: editAgent?.id,
|
||||
...(editAgent || {}),
|
||||
...values,
|
||||
agentConfig: JSON.stringify({ ...config, ...values.agentConfig }) as any,
|
||||
examples: examples.map((example) => example.question),
|
||||
enableSearch: values.enableSearch ? 1 : 0,
|
||||
});
|
||||
@@ -77,8 +96,9 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
const formTabList = [
|
||||
{
|
||||
label: '基本信息',
|
||||
key: 'basic',
|
||||
children: (
|
||||
<>
|
||||
<div className={styles.agentFormContainer}>
|
||||
<FormItem
|
||||
name="name"
|
||||
label="名称"
|
||||
@@ -116,6 +136,24 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
<Switch />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
name={['agentConfig', 'simpleMode']}
|
||||
label="开启精简模式"
|
||||
tooltip="精简模式下不可调整查询条件、不显示调试信息、不显示可视化组件"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
name={['agentConfig', 'debugMode']}
|
||||
label="显示调试信息"
|
||||
tooltip="包含Schema映射、SQL生成每阶段的关键信息"
|
||||
valuePropName="checked"
|
||||
>
|
||||
<Switch />
|
||||
</FormItem>
|
||||
|
||||
<FormItem name="examples" label="示例问题">
|
||||
<div className={styles.paramsSection}>
|
||||
{examples.map((example) => {
|
||||
@@ -153,14 +191,15 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
<FormItem name="description" label="描述">
|
||||
<TextArea placeholder="请输入助理描述" />
|
||||
</FormItem>
|
||||
</>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: '大模型配置',
|
||||
key: 'llmConfig',
|
||||
children: (
|
||||
<>
|
||||
<FormItem name={['llmConfig', 'provider']} label="模型提供方式">
|
||||
<div className={styles.agentFormContainer}>
|
||||
<FormItem name={['llmConfig', 'provider']} label="接口协议">
|
||||
<Select placeholder="">
|
||||
{['OPEN_AI'].map((item) => (
|
||||
<Select.Option key={item} value={item}>
|
||||
@@ -169,7 +208,7 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem name={['llmConfig', 'modelName']} label="大模型名称">
|
||||
<FormItem name={['llmConfig', 'modelName']} label="Model Name">
|
||||
<Input placeholder="请输入大模型名称" />
|
||||
</FormItem>
|
||||
<FormItem name={['llmConfig', 'baseUrl']} label="Base URL">
|
||||
@@ -177,10 +216,10 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
</FormItem>
|
||||
<FormItem
|
||||
name={['llmConfig', 'apiKey']}
|
||||
label="API KEY"
|
||||
label="API Key"
|
||||
// hidden={formData?.llmConfig?.provider === 'LOCAL_AI'}
|
||||
>
|
||||
<Input placeholder="请输入API KEY" />
|
||||
<Input placeholder="请输入API Key" />
|
||||
</FormItem>
|
||||
|
||||
<FormItem name={['llmConfig', 'temperature']} label="Temperature">
|
||||
@@ -198,43 +237,61 @@ const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
|
||||
<FormItem name={['llmConfig', 'timeOut']} label="超时时间(秒)">
|
||||
<InputNumber />
|
||||
</FormItem>
|
||||
</>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
label: '工具管理',
|
||||
key: 'tools',
|
||||
children: <ToolsSection currentAgent={editAgent} onSaveAgent={onSaveAgent} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open
|
||||
title={editAgent ? '编辑助理' : '新建助理'}
|
||||
confirmLoading={saveLoading}
|
||||
width={800}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
<Form
|
||||
{...layout}
|
||||
form={form}
|
||||
initialValues={formData}
|
||||
onValuesChange={(value, values) => {
|
||||
setFormData(values);
|
||||
}}
|
||||
className={globalStyles.supersonicForm}
|
||||
>
|
||||
<Form
|
||||
{...layout}
|
||||
form={form}
|
||||
initialValues={formData}
|
||||
onValuesChange={(value, values) => {
|
||||
setFormData(values);
|
||||
<Tabs
|
||||
tabBarExtraContent={
|
||||
<Space>
|
||||
<Button
|
||||
type="primary"
|
||||
loading={saveLoading}
|
||||
onClick={() => {
|
||||
onOk();
|
||||
}}
|
||||
>
|
||||
保 存
|
||||
</Button>
|
||||
{activeKey === 'tools' && (
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
// setEditTool(undefined);
|
||||
// setModalVisible(true);
|
||||
onCreateToolBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> 新增工具
|
||||
</Button>
|
||||
)}
|
||||
</Space>
|
||||
}
|
||||
defaultActiveKey="basic"
|
||||
activeKey={activeKey}
|
||||
onChange={(key) => {
|
||||
setActiveKey(key);
|
||||
}}
|
||||
className={globalStyles.supersonicForm}
|
||||
>
|
||||
<Tabs
|
||||
tabPosition={'left'}
|
||||
items={formTabList.map((item) => {
|
||||
const { label, children } = item;
|
||||
return {
|
||||
label,
|
||||
key: label,
|
||||
children,
|
||||
};
|
||||
})}
|
||||
/>
|
||||
</Form>
|
||||
</Modal>
|
||||
items={formTabList}
|
||||
/>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
export default AgentModal;
|
||||
export default AgentForm;
|
||||
@@ -1,6 +1,5 @@
|
||||
import { DeleteOutlined, EditOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons';
|
||||
import { PlusOutlined } from '@ant-design/icons';
|
||||
import { Button, Popconfirm, Switch, Table } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import moment from 'moment';
|
||||
import { useEffect, useState } from 'react';
|
||||
import styles from './style.less';
|
||||
@@ -8,24 +7,22 @@ import { AgentType } from './type';
|
||||
|
||||
type Props = {
|
||||
agents: AgentType[];
|
||||
currentAgent?: AgentType;
|
||||
loading: boolean;
|
||||
onSelectAgent: (agent: AgentType) => void;
|
||||
onDeleteAgent: (id: number) => void;
|
||||
onEditAgent: (agent?: AgentType) => void;
|
||||
|
||||
onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
|
||||
onCreatBtnClick?: () => void;
|
||||
};
|
||||
|
||||
const AgentsSection: React.FC<Props> = ({
|
||||
agents,
|
||||
currentAgent,
|
||||
onSelectAgent,
|
||||
onDeleteAgent,
|
||||
onEditAgent,
|
||||
onSaveAgent,
|
||||
onCreatBtnClick,
|
||||
}) => {
|
||||
const [showAgents, setShowAgents] = useState<AgentType[]>([]);
|
||||
const [showType, setShowType] = useState(localStorage.getItem('AGENT_SHOW_TYPE') || 'list');
|
||||
|
||||
useEffect(() => {
|
||||
setShowAgents(agents);
|
||||
@@ -129,91 +126,14 @@ const AgentsSection: React.FC<Props> = ({
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
onEditAgent(undefined);
|
||||
onCreatBtnClick?.();
|
||||
}}
|
||||
>
|
||||
<PlusOutlined />
|
||||
新建助理
|
||||
</Button>
|
||||
</div>
|
||||
{showType === 'list' ? (
|
||||
<Table columns={columns} dataSource={showAgents} />
|
||||
) : (
|
||||
<div className={styles.agentsContainer}>
|
||||
{showAgents.map((agent) => {
|
||||
const agentItemClass = classNames(styles.agentItem, {
|
||||
[styles.agentActive]: agent.id === currentAgent?.id,
|
||||
});
|
||||
return (
|
||||
<div
|
||||
className={agentItemClass}
|
||||
key={agent.id}
|
||||
onClick={() => {
|
||||
onSelectAgent(agent);
|
||||
}}
|
||||
>
|
||||
<UserOutlined className={styles.agentIcon} />
|
||||
<div className={styles.agentContent}>
|
||||
<div className={styles.agentNameBar}>
|
||||
<div className={styles.agentName}>{agent.name}</div>
|
||||
<div className={styles.operateIcons}>
|
||||
<EditOutlined
|
||||
className={styles.operateIcon}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEditAgent(agent);
|
||||
}}
|
||||
/>
|
||||
<Popconfirm
|
||||
title="确定删除吗？"
|
||||
onCancel={(e) => {
|
||||
e?.stopPropagation();
|
||||
}}
|
||||
onConfirm={(e) => {
|
||||
e?.stopPropagation();
|
||||
onDeleteAgent(agent.id!);
|
||||
}}
|
||||
>
|
||||
<DeleteOutlined
|
||||
className={styles.operateIcon}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.bottomBar}>
|
||||
<div className={styles.agentDescription} title={agent.description}>
|
||||
{agent.description}
|
||||
</div>
|
||||
<div className={styles.toggleStatus}>
|
||||
{agent.status === 0 ? (
|
||||
'已禁用'
|
||||
) : (
|
||||
<span className={styles.online}>已启用</span>
|
||||
)}
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
size="small"
|
||||
defaultChecked={agent.status === 1}
|
||||
onChange={(value) => {
|
||||
onSaveAgent({ ...agent, status: value ? 1 : 0 }, true);
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<Table columns={columns} dataSource={showAgents} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Form, Modal, Input, Select, Button, TreeSelect, message } from 'antd';
|
||||
import { Form, Modal, Input, Select, Button, TreeSelect } from 'antd';
|
||||
import {
|
||||
AgentToolType,
|
||||
AgentToolTypeEnum,
|
||||
@@ -31,16 +31,6 @@ const ToolModal: React.FC<Props> = ({ editTool, onSaveTool, onCancel }) => {
|
||||
const [plugins, setPlugins] = useState<PluginType[]>([]);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
// const filterTree = (treeData: any[]) => {
|
||||
// treeData.forEach((node) => {
|
||||
// if (Array.isArray(node.children) && node.children?.length > 0) {
|
||||
// node.children = node.children.filter((item: any) => item.type !== 'DOMAIN');
|
||||
// filterTree(node.children);
|
||||
// }
|
||||
// });
|
||||
// return treeData;
|
||||
// };
|
||||
|
||||
const initModelList = async () => {
|
||||
const res = await getModelList();
|
||||
const treeData = traverseTree(res.data, (node: any) => {
|
||||
@@ -99,6 +89,7 @@ const ToolModal: React.FC<Props> = ({ editTool, onSaveTool, onCancel }) => {
|
||||
title={editTool ? '编辑工具' : '新建工具'}
|
||||
confirmLoading={saveLoading}
|
||||
width={800}
|
||||
maskClosable={false}
|
||||
onOk={onOk}
|
||||
onCancel={onCancel}
|
||||
>
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
import { uuid } from '@/utils/utils';
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
PlusOutlined,
|
||||
ToolOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { Button, Empty, Popconfirm, Space, Switch, Tag } from 'antd';
|
||||
import { DeleteOutlined, EditOutlined, ToolOutlined } from '@ant-design/icons';
|
||||
import { Empty, Popconfirm } from 'antd';
|
||||
import { useState } from 'react';
|
||||
import styles from './style.less';
|
||||
import ToolModal from './ToolModal';
|
||||
@@ -15,11 +9,9 @@ import { AgentToolType, AgentType, AGENT_TOOL_TYPE_LIST } from './type';
|
||||
type Props = {
|
||||
currentAgent?: AgentType;
|
||||
onSaveAgent: (agent: AgentType, noTip?: boolean) => Promise<void>;
|
||||
onEditAgent: (agent?: AgentType) => void;
|
||||
goBack: () => void;
|
||||
};
|
||||
|
||||
const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent, goBack }) => {
|
||||
const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent }) => {
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editTool, setEditTool] = useState<AgentToolType>();
|
||||
|
||||
@@ -63,99 +55,8 @@ const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent,
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.toolsSection}>
|
||||
<div className={styles.toolsSectionTitleBar}>
|
||||
<ArrowLeftOutlined className={styles.backIcon} onClick={goBack} />
|
||||
<div className={styles.agentTitle}>{currentAgent?.name}</div>
|
||||
<div className={styles.toggleStatus}>
|
||||
{currentAgent?.status === 0 ? '已禁用' : <span className={styles.online}>已启用</span>}
|
||||
<span
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<Switch
|
||||
size="small"
|
||||
defaultChecked={currentAgent?.status === 1}
|
||||
onChange={(value) => {
|
||||
onSaveAgent({ ...currentAgent, status: value ? 1 : 0 }, true);
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={styles.basicInfo}>
|
||||
<div className={styles.basicInfoTitle}>
|
||||
基本信息
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
onEditAgent(currentAgent);
|
||||
}}
|
||||
>
|
||||
修改信息
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.infoContent}>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}> 示例问题：</span>
|
||||
<Space>
|
||||
{currentAgent?.examples?.map((item) => (
|
||||
<Tag key={item}>{item}</Tag>
|
||||
))}
|
||||
</Space>
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}> 描述： </span>
|
||||
{currentAgent?.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{currentAgent?.llmConfig && (
|
||||
<div className={styles.basicInfo}>
|
||||
<div className={styles.basicInfoTitle}>大模型信息</div>
|
||||
<div className={styles.infoContent}>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}> 模型提供方式：</span>
|
||||
{currentAgent?.llmConfig?.provider}
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}>大模型名称:</span>
|
||||
{currentAgent?.llmConfig?.modelName}
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}>Base URL: </span>
|
||||
{currentAgent?.llmConfig?.baseUrl}
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}>API KEY:</span>
|
||||
{currentAgent?.llmConfig?.apiKey}
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}>Temperature: </span>
|
||||
{currentAgent?.llmConfig?.temperature}
|
||||
</div>
|
||||
<div className={styles.infoItem}>
|
||||
<span className={styles.label}>超时时间(秒): </span>{' '}
|
||||
{currentAgent?.llmConfig?.timeOut}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<>
|
||||
<div className={styles.toolSection}>
|
||||
<div className={styles.toolSectionTitleBar}>
|
||||
<div className={styles.toolSectionTitle}>工具</div>
|
||||
<Button
|
||||
type="primary"
|
||||
onClick={() => {
|
||||
setEditTool(undefined);
|
||||
setModalVisible(true);
|
||||
}}
|
||||
>
|
||||
<PlusOutlined /> 新增工具
|
||||
</Button>
|
||||
</div>
|
||||
{agentConfig?.tools && agentConfig?.tools?.length > 0 ? (
|
||||
<div className={styles.toolsContent}>
|
||||
{agentConfig.tools.map((tool: AgentToolType) => {
|
||||
@@ -211,7 +112,11 @@ const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent,
|
||||
</div>
|
||||
) : (
|
||||
<div className={styles.emptyHolder}>
|
||||
<Empty description={`【${currentAgent?.name}】暂无工具，请新增工具`} />
|
||||
<Empty
|
||||
description={`${
|
||||
currentAgent?.name ? `【${currentAgent?.name}】` : ''
|
||||
}暂无工具，请新增工具`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -224,7 +129,7 @@ const ToolsSection: React.FC<Props> = ({ currentAgent, onSaveAgent, onEditAgent,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
import { message } from 'antd';
|
||||
import { useEffect, useState } from 'react';
|
||||
import AgentsSection from './AgentsSection';
|
||||
import AgentModal from './AgentModal';
|
||||
import { uuid, jsonParse } from '@/utils/utils';
|
||||
import { deleteAgent, getAgentList, saveAgent } from './service';
|
||||
import styles from './style.less';
|
||||
import ToolsSection from './ToolsSection';
|
||||
import { AgentType } from './type';
|
||||
import ToolModal from './ToolModal';
|
||||
import AgentDetail from './AgentDetail';
|
||||
import { AgentToolType, AgentType } from './type';
|
||||
|
||||
const Agent = () => {
|
||||
const [agents, setAgents] = useState<AgentType[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [currentAgent, setCurrentAgent] = useState<AgentType>();
|
||||
const [modalVisible, setModalVisible] = useState(false);
|
||||
const [editAgent, setEditAgent] = useState<AgentType>();
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false);
|
||||
const [agentConfig, setAgentConfig] = useState<any>({});
|
||||
|
||||
useEffect(() => {
|
||||
const config = jsonParse(currentAgent?.agentConfig, {});
|
||||
setAgentConfig(config);
|
||||
}, [currentAgent]);
|
||||
|
||||
const updateData = async () => {
|
||||
setLoading(true);
|
||||
@@ -36,12 +43,29 @@ const Agent = () => {
|
||||
updateData();
|
||||
}, []);
|
||||
|
||||
const onSaveTool = async (tool: AgentToolType) => {
|
||||
const newAgentConfig = agentConfig || ({} as any);
|
||||
if (!newAgentConfig.tools) {
|
||||
newAgentConfig.tools = [];
|
||||
}
|
||||
if (tool.id) {
|
||||
const index = newAgentConfig.tools.findIndex((item: AgentToolType) => item.id === tool.id);
|
||||
newAgentConfig.tools[index] = tool;
|
||||
} else {
|
||||
newAgentConfig.tools.push({ ...tool, id: uuid() });
|
||||
}
|
||||
await onSaveAgent({
|
||||
...currentAgent,
|
||||
agentConfig: JSON.stringify(newAgentConfig) as any,
|
||||
});
|
||||
setModalVisible(false);
|
||||
};
|
||||
|
||||
const onSaveAgent = async (agent: AgentType, noTip?: boolean) => {
|
||||
await saveAgent(agent);
|
||||
if (!noTip) {
|
||||
message.success('保存成功');
|
||||
}
|
||||
setModalVisible(false);
|
||||
updateData();
|
||||
};
|
||||
|
||||
@@ -51,37 +75,39 @@ const Agent = () => {
|
||||
updateData();
|
||||
};
|
||||
|
||||
const onEditAgent = (agent?: AgentType) => {
|
||||
setEditAgent(agent);
|
||||
setModalVisible(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.agent}>
|
||||
{!currentAgent ? (
|
||||
{!showDetail ? (
|
||||
<AgentsSection
|
||||
agents={agents}
|
||||
currentAgent={currentAgent}
|
||||
loading={loading}
|
||||
onSelectAgent={setCurrentAgent}
|
||||
onEditAgent={onEditAgent}
|
||||
onSelectAgent={(agent) => {
|
||||
setCurrentAgent(agent);
|
||||
setShowDetail(true);
|
||||
}}
|
||||
onDeleteAgent={onDeleteAgent}
|
||||
onSaveAgent={onSaveAgent}
|
||||
onCreatBtnClick={() => {
|
||||
setCurrentAgent(undefined);
|
||||
setShowDetail(true);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<ToolsSection
|
||||
<AgentDetail
|
||||
currentAgent={currentAgent}
|
||||
onSaveAgent={onSaveAgent}
|
||||
onEditAgent={onEditAgent}
|
||||
onCreateToolBtnClick={() => {
|
||||
setModalVisible(true);
|
||||
}}
|
||||
goBack={() => {
|
||||
setShowDetail(false);
|
||||
setCurrentAgent(undefined);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{modalVisible && (
|
||||
<AgentModal
|
||||
editAgent={editAgent}
|
||||
onSaveAgent={onSaveAgent}
|
||||
<ToolModal
|
||||
onSaveTool={onSaveTool}
|
||||
onCancel={() => {
|
||||
setModalVisible(false);
|
||||
}}
|
||||
|
||||
@@ -14,6 +14,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.agentFormContainer {
|
||||
width: 1000px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
// margin-top: 20px;
|
||||
.searchBar {
|
||||
@@ -176,6 +181,7 @@
|
||||
|
||||
.basicInfo {
|
||||
margin: 20px;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user