[feature](weaapp) add agent

2025-12-24 10:27:28 +08:00 · 2023-08-20 18:17:00 +08:00
parent c93e60ced7
commit aa218898ff
40 changed files with 1928 additions and 316 deletions
--- a/webapp/packages/supersonic-fe/config/routes.ts
+++ b/webapp/packages/supersonic-fe/config/routes.ts
@@ -26,6 +26,12 @@ const ROUTES = [
    component: './ChatPlugin',
    envEnableList: [ENV_KEY.CHAT],
  },
+  {
+    path: '/agent',
+    name: 'agent',
+    component: './Agent',
+    envEnableList: [ENV_KEY.CHAT],
+  },
  {
    path: '/semanticModel/model/:domainId?/:modelId?/:menuKey?',
    component: './SemanticModel/DomainManager',
--- a/webapp/packages/supersonic-fe/package.json
+++ b/webapp/packages/supersonic-fe/package.json
@@ -96,7 +96,7 @@
    "react-split-pane": "^2.0.3",
    "react-syntax-highlighter": "^15.4.3",
    "sql-formatter": "^2.3.3",
-    "supersonic-chat-sdk": "^0.3.0",
+    "supersonic-chat-sdk": "^0.4.32",
    "umi": "3.5",
    "umi-request": "^1.0.8"
  },
--- a/webapp/packages/supersonic-fe/src/app.tsx
+++ b/webapp/packages/supersonic-fe/src/app.tsx
@@ -20,7 +20,7 @@ const TOKEN_KEY = AUTH_TOKEN_KEY;

 const replaceRoute = '/';

-const getRuningEnv = async () => {
+const getRunningEnv = async () => {
  try {
    const response = await fetch(`${publicPath}supersonic.config.json`);
    const config = await response.json();
@@ -72,7 +72,6 @@ export async function getInitialState(): Promise<{
  codeList?: string[];
  authCodes?: string[];
 }> {
-  // await getRuningEnv();
  const fetchUserInfo = async () => {
    try {
      const { code, data } = await queryCurrentUser();
@@ -112,8 +111,9 @@ export async function getInitialState(): Promise<{
 }

 export async function patchRoutes({ routes }) {
-  const config = await getRuningEnv();
+  const config = await getRunningEnv();
  if (config && config.env) {
+    window.RUNNING_ENV = config.env;
    const { env } = config;
    const target = routes[0].routes;
    if (env) {
@@ -123,6 +123,14 @@ export async function patchRoutes({ routes }) {
      // 写入根据环境转换过的的route
      target.push(...envRoutes);
    }
+  } else {
+    const target = routes[0].routes;
+    // start-standalone模式不存在env，在此模式下不显示chatSetting
+    const envRoutes = target.filter((item: any) => {
+      return !['chatSetting'].includes(item.name);
+    });
+    target.splice(0, 99);
+    target.push(...envRoutes);
  }
 }

--- a/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
+++ b/webapp/packages/supersonic-fe/src/locales/zh-CN/menu.ts
@@ -13,4 +13,5 @@ export default {
  'menu.chatPlugin': '问答插件',
  'menu.login': '登录',
  'menu.chat': '问答对话',
+  'menu.agent': '问答助理'
 };
--- a/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentModal.tsx
@@ -0,0 +1,109 @@
+import { Form, Modal, Input, Button, Switch } from 'antd';
+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';
+
+const FormItem = Form.Item;
+const { TextArea } = Input;
+
+type Props = {
+  editAgent?: AgentType;
+  onSaveAgent: (agent: AgentType) => Promise<void>;
+  onCancel: () => void;
+};
+
+const AgentModal: React.FC<Props> = ({ editAgent, onSaveAgent, onCancel }) => {
+  const [saveLoading, setSaveLoading] = useState(false);
+  const [examples, setExamples] = useState<{ id: string; question?: string }[]>([]);
+  const [form] = Form.useForm();
+
+  useEffect(() => {
+    if (editAgent) {
+      form.setFieldsValue({ ...editAgent, enableSearch: editAgent.enableSearch !== 0 });
+      if (editAgent.examples) {
+        setExamples(editAgent.examples.map((question) => ({ id: uuid(), question })));
+      }
+    } else {
+      form.resetFields();
+    }
+  }, [editAgent]);
+
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 14 },
+  };
+
+  const onOk = async () => {
+    const values = await form.validateFields();
+    setSaveLoading(true);
+    await onSaveAgent({
+      id: editAgent?.id,
+      ...(editAgent || {}),
+      ...values,
+      examples: examples.map((example) => example.question),
+      enableSearch: values.enableSearch ? 1 : 0,
+    });
+    setSaveLoading(false);
+  };
+
+  return (
+    <Modal
+      open
+      title={editAgent ? '编辑助理' : '新建助理'}
+      confirmLoading={saveLoading}
+      width={800}
+      onOk={onOk}
+      onCancel={onCancel}
+    >
+      <Form {...layout} form={form} initialValues={{ enableSearch: true }}>
+        <FormItem name="name" label="名称" rules={[{ required: true, message: '请输入助理名称' }]}>
+          <Input placeholder="请输入助理名称" />
+        </FormItem>
+        <FormItem name="enableSearch" label="支持联想" valuePropName="checked">
+          <Switch checkedChildren="开启" unCheckedChildren="关闭" />
+        </FormItem>
+        <FormItem name="examples" label="示例问题">
+          <div className={styles.paramsSection}>
+            {examples.map((example) => {
+              const { id, question } = example;
+              return (
+                <div className={styles.filterRow} key={id}>
+                  <Input
+                    placeholder="示例问题"
+                    value={question}
+                    className={styles.questionExample}
+                    onChange={(e) => {
+                      example.question = e.target.value;
+                      setExamples([...examples]);
+                    }}
+                    allowClear
+                  />
+                  <DeleteOutlined
+                    onClick={() => {
+                      setExamples(examples.filter((item) => item.id !== id));
+                    }}
+                  />
+                </div>
+              );
+            })}
+            <Button
+              onClick={() => {
+                setExamples([...examples, { id: uuid() }]);
+              }}
+            >
+              <PlusOutlined />
+              新增示例问题
+            </Button>
+          </div>
+        </FormItem>
+        <FormItem name="description" label="描述">
+          <TextArea placeholder="请输入助理描述" />
+        </FormItem>
+      </Form>
+    </Modal>
+  );
+};
+
+export default AgentModal;
--- a/webapp/packages/supersonic-fe/src/pages/Agent/AgentsSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/AgentsSection.tsx
@@ -0,0 +1,144 @@
+import { DeleteOutlined, EditOutlined, PlusOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Input, Popconfirm, Switch } from 'antd';
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import styles from './style.less';
+import { AgentType } from './type';
+
+const { Search } = Input;
+
+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>;
+};
+
+const AgentsSection: React.FC<Props> = ({
+  agents,
+  currentAgent,
+  onSelectAgent,
+  onDeleteAgent,
+  onEditAgent,
+  onSaveAgent,
+}) => {
+  // const [searchName, setSearchName] = useState('');
+  const [showAgents, setShowAgents] = useState<AgentType[]>([]);
+
+  useEffect(() => {
+    setShowAgents(agents);
+  }, [agents]);
+
+  return (
+    <div className={styles.agentsSection}>
+      {/* <div className={styles.sectionTitle}>问答助理</div> */}
+      <div className={styles.content}>
+        <div className={styles.searchBar}>
+          {/* <Search
+            placeholder="请输入助理名称搜索"
+            className={styles.searchControl}
+            value={searchName}
+            onChange={(e) => {
+              setSearchName(e.target.value);
+            }}
+            onSearch={(value) => {
+              setShowAgents(
+                agents.filter((agent) =>
+                  agent.name?.trim().toLowerCase().includes(value.trim().toLowerCase()),
+                ),
+              );
+            }}
+          /> */}
+          <Button
+            type="primary"
+            onClick={() => {
+              onEditAgent(undefined);
+            }}
+          >
+            <PlusOutlined />
+            新建助理
+          </Button>
+        </div>
+        <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>
+      </div>
+    </div>
+  );
+};
+
+export default AgentsSection;
--- a/webapp/packages/supersonic-fe/src/pages/Agent/ToolModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/ToolModal.tsx
@@ -0,0 +1,264 @@
+import { Form, Modal, Input, Select, Button } from 'antd';
+import {
+  AgentToolType,
+  AgentToolTypeEnum,
+  AGENT_TOOL_TYPE_LIST,
+  MetricOptionType,
+  MetricType,
+  ModelType,
+  QUERY_MODE_LIST,
+} from './type';
+import { useEffect, useState } from 'react';
+import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
+import styles from './style.less';
+import { getLeafList, uuid } from '@/utils/utils';
+import { getMetricList, getModelList } from './service';
+import { PluginType } from '../ChatPlugin/type';
+import { getPluginList } from '../ChatPlugin/service';
+
+const FormItem = Form.Item;
+
+type Props = {
+  editTool?: AgentToolType;
+  onSaveTool: (tool: AgentToolType) => Promise<void>;
+  onCancel: () => void;
+};
+
+const ToolModal: React.FC<Props> = ({ editTool, onSaveTool, onCancel }) => {
+  const [toolType, setToolType] = useState<AgentToolTypeEnum>();
+  const [modelList, setModelList] = useState<ModelType[]>([]);
+  const [saveLoading, setSaveLoading] = useState(false);
+  const [examples, setExamples] = useState<{ id: string; question?: string }[]>([]);
+  const [metricOptions, setMetricOptions] = useState<MetricOptionType[]>([]);
+  const [modelMetricList, setModelMetricList] = useState<MetricType[]>([]);
+  const [plugins, setPlugins] = useState<PluginType[]>([]);
+  const [form] = Form.useForm();
+
+  const initModelList = async () => {
+    const res = await getModelList();
+    setModelList([{ id: -1, name: '默认' }, ...getLeafList(res.data)]);
+  };
+
+  const initPluginList = async () => {
+    const res = await getPluginList({});
+    setPlugins(res.data || []);
+  };
+
+  useEffect(() => {
+    initModelList();
+    initPluginList();
+  }, []);
+
+  const initModelMetrics = async (params: any) => {
+    const res = await getMetricList(params[0].modelId);
+    setModelMetricList(res.data.list);
+  };
+
+  useEffect(() => {
+    if (editTool) {
+      form.setFieldsValue({ ...editTool, plugins: editTool.plugins?.[0] });
+      setToolType(editTool.type);
+      setExamples(
+        (editTool.exampleQuestions || []).map((item) => ({ id: uuid(), question: item })),
+      );
+      setMetricOptions(editTool.metricOptions || []);
+      if (editTool.metricOptions && editTool.metricOptions.length > 0) {
+        initModelMetrics(editTool.metricOptions || []);
+      }
+    } else {
+      form.resetFields();
+    }
+  }, [editTool]);
+
+  const layout = {
+    labelCol: { span: 6 },
+    wrapperCol: { span: 14 },
+  };
+
+  const onOk = async () => {
+    const values = await form.validateFields();
+    setSaveLoading(true);
+    await onSaveTool({
+      id: editTool?.id,
+      ...values,
+      exampleQuestions: examples.map((item) => item.question).filter((item) => item),
+      plugins: values.plugins ? [values.plugins] : undefined,
+      metricOptions: metricOptions.map((item) => ({ modelId: values.modelId, ...item })),
+    });
+    setSaveLoading(false);
+  };
+
+  const updateMetricList = async (value: number) => {
+    if (modelMetricList[value]) {
+      return;
+    }
+    const res = await getMetricList(value);
+    setModelMetricList(res.data.list);
+  };
+
+  return (
+    <Modal
+      open
+      title={editTool ? '编辑工具' : '新建工具'}
+      confirmLoading={saveLoading}
+      width={800}
+      onOk={onOk}
+      onCancel={onCancel}
+    >
+      <Form {...layout} form={form}>
+        <FormItem name="type" label="类型" rules={[{ required: true, message: '请选择工具类型' }]}>
+          <Select
+            options={AGENT_TOOL_TYPE_LIST}
+            placeholder="请选择工具类型"
+            onChange={setToolType}
+          />
+        </FormItem>
+        <FormItem name="name" label="名称">
+          <Input placeholder="请输入工具名称" />
+        </FormItem>
+        {toolType === AgentToolTypeEnum.DSL && (
+          <>
+            <FormItem name="modelIds" label="主题域">
+              <Select
+                options={modelList.map((model) => ({ label: model.name, value: model.id }))}
+                placeholder="请选择主题域"
+                mode="multiple"
+              />
+            </FormItem>
+            <FormItem name="exampleQuestions" label="示例问题">
+              <div className={styles.paramsSection}>
+                {examples.map((example) => {
+                  const { id, question } = example;
+                  return (
+                    <div className={styles.filterRow} key={id}>
+                      <Input
+                        placeholder="示例问题"
+                        value={question}
+                        className={styles.questionExample}
+                        onChange={(e) => {
+                          example.question = e.target.value;
+                          setExamples([...examples]);
+                        }}
+                        allowClear
+                      />
+                      <DeleteOutlined
+                        onClick={() => {
+                          setExamples(examples.filter((item) => item.id !== id));
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+                <Button
+                  onClick={() => {
+                    setExamples([...examples, { id: uuid() }]);
+                  }}
+                >
+                  <PlusOutlined />
+                  新增示例问题
+                </Button>
+              </div>
+            </FormItem>
+          </>
+        )}
+        {toolType === AgentToolTypeEnum.INTERPRET && (
+          <>
+            <FormItem name="modelId" label="主题域">
+              <Select
+                options={modelList.map((model) => ({ label: model.name, value: model.id }))}
+                showSearch
+                filterOption={(input, option) =>
+                  ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
+                }
+                placeholder="请选择主题域"
+                onChange={(value) => {
+                  setMetricOptions([...metricOptions]);
+                  updateMetricList(value);
+                }}
+              />
+            </FormItem>
+            <FormItem name="params" label="指标">
+              <div className={styles.paramsSection}>
+                {metricOptions.map((filter: any) => {
+                  return (
+                    <div className={styles.filterRow} key={filter.id}>
+                      <Select
+                        placeholder="请选择指标，需先选择主题域"
+                        options={(modelMetricList || []).map((metric) => ({
+                          label: metric.name,
+                          value: `${metric.id}`,
+                        }))}
+                        showSearch
+                        className={styles.filterParamValueField}
+                        filterOption={(input, option) =>
+                          ((option?.label ?? '') as string)
+                            .toLowerCase()
+                            .includes(input.toLowerCase())
+                        }
+                        allowClear
+                        value={filter.metricId}
+                        onChange={(value) => {
+                          filter.metricId = value;
+                          setMetricOptions([...metricOptions]);
+                        }}
+                      />
+                      <DeleteOutlined
+                        onClick={() => {
+                          setMetricOptions(metricOptions.filter((item) => item.id !== filter.id));
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+                <Button
+                  onClick={() => {
+                    setMetricOptions([
+                      ...metricOptions,
+                      { id: uuid(), metricId: undefined, modelId: undefined },
+                    ]);
+                  }}
+                >
+                  <PlusOutlined />
+                  新增指标
+                </Button>
+              </div>
+            </FormItem>
+          </>
+        )}
+        {toolType === AgentToolTypeEnum.PLUGIN && (
+          <FormItem name="plugins" label="插件">
+            <Select
+              placeholder="请选择插件"
+              options={plugins.map((plugin) => ({ label: plugin.name, value: plugin.id }))}
+              showSearch
+              filterOption={(input, option) =>
+                ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
+              }
+              onChange={(value) => {
+                const plugin = plugins.find((item) => item.id === value);
+                if (plugin) {
+                  form.setFieldsValue({ name: plugin.name });
+                }
+              }}
+            />
+          </FormItem>
+        )}
+        {toolType === AgentToolTypeEnum.RULE && (
+          <FormItem name="queryModes" label="查询模式">
+            <Select
+              placeholder="请选择查询模式"
+              options={QUERY_MODE_LIST}
+              showSearch
+              mode="multiple"
+              filterOption={(input, option) =>
+                ((option?.label ?? '') as string).toLowerCase().includes(input.toLowerCase())
+              }
+            />
+          </FormItem>
+        )}
+      </Form>
+    </Modal>
+  );
+};
+
+export default ToolModal;
--- a/webapp/packages/supersonic-fe/src/pages/Agent/ToolsSection.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/ToolsSection.tsx
@@ -0,0 +1,196 @@
+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 { useState } from 'react';
+import styles from './style.less';
+import ToolModal from './ToolModal';
+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 [modalVisible, setModalVisible] = useState(false);
+  const [editTool, setEditTool] = useState<AgentToolType>();
+
+  const agentConfig = currentAgent?.agentConfig ? JSON.parse(currentAgent.agentConfig as any) : {};
+
+  const saveAgent = async (agent: AgentType) => {
+    await onSaveAgent(agent);
+    setModalVisible(false);
+  };
+
+  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 saveAgent({
+      ...currentAgent,
+      agentConfig: JSON.stringify(newAgentConfig) as any,
+    });
+    setModalVisible(false);
+  };
+
+  const onDeleteTool = async (tool: AgentToolType) => {
+    const newAgentConfig = agentConfig || ({} as any);
+    if (!newAgentConfig.tools) {
+      newAgentConfig.tools = [];
+    }
+    newAgentConfig.tools = newAgentConfig.tools.filter(
+      (item: AgentToolType) => item.id !== tool.id,
+    );
+    await saveAgent({
+      ...currentAgent,
+      agentConfig: JSON.stringify(newAgentConfig) as any,
+    });
+  };
+
+  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}>
+            示例问题：
+            <Space>
+              {currentAgent?.examples?.map((item) => (
+                <Tag key={item}>{item}</Tag>
+              ))}
+            </Space>
+          </div>
+          <div className={styles.infoItem}>描述：{currentAgent?.description}</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) => {
+              const toolType = AGENT_TOOL_TYPE_LIST.find((item) => item.value === tool.type)?.label;
+              return (
+                <div
+                  className={styles.toolItem}
+                  key={tool.id}
+                  onClick={() => {
+                    setEditTool(tool);
+                    setModalVisible(true);
+                  }}
+                >
+                  <ToolOutlined className={styles.toolIcon} />
+                  <div className={styles.toolContent}>
+                    <div className={styles.toolTopSection}>
+                      <div className={styles.toolType}>{tool.name || toolType}</div>
+                      <div className={styles.toolOperateIcons}>
+                        <EditOutlined
+                          className={styles.toolOperateIcon}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setEditTool(tool);
+                            setModalVisible(true);
+                          }}
+                        />
+                        <Popconfirm
+                          title="确定删除吗？"
+                          onCancel={(e) => {
+                            e?.stopPropagation();
+                          }}
+                          onConfirm={(e) => {
+                            e?.stopPropagation();
+                            onDeleteTool(tool);
+                          }}
+                        >
+                          <DeleteOutlined
+                            className={styles.toolOperateIcon}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                            }}
+                          />
+                        </Popconfirm>
+                      </div>
+                    </div>
+                    <div className={styles.toolDesc} title={toolType}>
+                      {toolType}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className={styles.emptyHolder}>
+            <Empty description={`【${currentAgent?.name}】暂无工具，请新增工具`} />
+          </div>
+        )}
+      </div>
+      {modalVisible && (
+        <ToolModal
+          editTool={editTool}
+          onSaveTool={onSaveTool}
+          onCancel={() => {
+            setModalVisible(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default ToolsSection;
--- a/webapp/packages/supersonic-fe/src/pages/Agent/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/index.tsx
@@ -0,0 +1,94 @@
+import { message } from 'antd';
+import { useEffect, useState } from 'react';
+import AgentsSection from './AgentsSection';
+import AgentModal from './AgentModal';
+import { deleteAgent, getAgentList, saveAgent } from './service';
+import styles from './style.less';
+import ToolsSection from './ToolsSection';
+import { 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 updateData = async () => {
+    setLoading(true);
+    const res = await getAgentList();
+    setLoading(false);
+    setAgents(res.data || []);
+    if (!res.data?.length) {
+      return;
+    }
+    if (currentAgent) {
+      const agent = res.data.find((item) => item.id === currentAgent.id);
+      if (agent) {
+        setCurrentAgent(agent);
+      } else {
+        setCurrentAgent(res.data[0]);
+      }
+    }
+  };
+
+  useEffect(() => {
+    updateData();
+  }, []);
+
+  const onSaveAgent = async (agent: AgentType, noTip?: boolean) => {
+    await saveAgent(agent);
+    if (!noTip) {
+      message.success('保存成功');
+    }
+    setModalVisible(false);
+    updateData();
+  };
+
+  const onDeleteAgent = async (id: number) => {
+    await deleteAgent(id);
+    message.success('删除成功');
+    updateData();
+  };
+
+  const onEditAgent = (agent?: AgentType) => {
+    setEditAgent(agent);
+    setModalVisible(true);
+  };
+
+  return (
+    <div className={styles.agent}>
+      {!currentAgent ? (
+        <AgentsSection
+          agents={agents}
+          currentAgent={currentAgent}
+          loading={loading}
+          onSelectAgent={setCurrentAgent}
+          onEditAgent={onEditAgent}
+          onDeleteAgent={onDeleteAgent}
+          onSaveAgent={onSaveAgent}
+        />
+      ) : (
+        <ToolsSection
+          currentAgent={currentAgent}
+          onSaveAgent={onSaveAgent}
+          onEditAgent={onEditAgent}
+          goBack={() => {
+            setCurrentAgent(undefined);
+          }}
+        />
+      )}
+      {modalVisible && (
+        <AgentModal
+          editAgent={editAgent}
+          onSaveAgent={onSaveAgent}
+          onCancel={() => {
+            setModalVisible(false);
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Agent;
--- a/webapp/packages/supersonic-fe/src/pages/Agent/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/service.ts
@@ -0,0 +1,36 @@
+import { request } from "umi";
+import { AgentType, MetricType, ModelType } from "./type";
+
+export function getAgentList() {
+  return request<Result<AgentType[]>>('/api/chat/agent/getAgentList');
+}
+
+export function saveAgent(agent: AgentType) {
+  return request<Result<any>>('/api/chat/agent', {
+    method: agent?.id ? 'PUT' : 'POST',
+    data: {...agent, status: agent.status !== undefined ? agent.status : 1},
+  });
+}
+
+export function deleteAgent(id: number) {
+  return request<Result<any>>(`/api/chat/agent/${id}`, {
+    method: 'DELETE',
+  });
+}
+
+export function getModelList() {
+  return request<Result<ModelType[]>>('/api/chat/conf/modelList', {
+    method: 'GET',
+  });
+}
+
+export function getMetricList(modelId: number) {
+  return request<Result<{list: MetricType[]}>>('/api/semantic/metric/queryMetric', {
+    method: 'POST',
+    data: {
+      modelIds: [modelId],
+      current: 1,
+      pageSize: 2000
+    }
+  });
+}
--- a/webapp/packages/supersonic-fe/src/pages/Agent/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/style.less
@@ -0,0 +1,292 @@
+.agent {
+  // background: #fff;
+  height: calc(100vh - 48px);
+}
+
+.agentsSection {
+  padding: 20px 40px;
+  background: #fff;
+  height: calc(100vh - 48px);
+
+  .sectionTitle {
+    font-size: 24px;
+    font-weight: 700;
+    padding-bottom: 30px;
+  }
+}
+
+.content {
+  margin-top: 20px;
+  .searchBar {
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+    margin-bottom: 40px;
+
+    .searchControl {
+      width: 500px;
+    }
+  }
+
+  .agentsContainer {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+
+    .agentItem {
+      display: flex;
+      width: 290px;
+      align-items: center;
+      border-radius: 10px;
+      border: 1px solid #e8e8e8;
+      padding: 12px;
+      cursor: pointer;
+
+      &:hover {
+        border-color: var(--chat-blue);
+      }
+
+      &.agentActive {
+        border-color: var(--chat-blue);
+      }
+
+      .agentIcon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 24px;
+        color: var(--chat-blue);
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #e8e8e8;
+      }
+
+      .agentContent {
+        margin-left: 12px;
+        flex: 1;
+
+        .agentNameBar {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .agentName {
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text-color);
+          }
+
+          .operateIcons {
+            display: flex;
+            align-items: center;
+            column-gap: 12px;
+            .operateIcon {
+              color: var(--text-color-fourth);
+              cursor: pointer;
+
+              &:hover {
+                color: var(--chat-blue);
+              }
+            }
+          }
+        }
+
+        .bottomBar {
+          display: flex;
+          align-items: center;
+          margin-top: 10px;
+          width: 210px;
+
+          .agentDescription {
+            width: 120px;
+            margin-right: 10px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            font-size: 12px;
+            margin-top: 4px;
+            color: var(--text-color-third)
+          }
+        }
+      }
+    }
+  }
+}
+
+.toggleStatus {
+  display: flex;
+  align-items: center;
+  column-gap: 12px;
+  font-size: 12px;
+
+  .online {
+    color: var(--chat-blue);
+  }
+}
+
+.toolsSection {
+  .toolsSectionTitleBar {
+    padding: 20px 30px;
+    background-color: #fff;
+    display: flex;
+    align-items: center;
+    column-gap: 20px;
+
+    .backIcon {
+      font-size: 20px;
+      color: var(--text-color);
+      cursor: pointer;
+
+      &:hover {
+        color: var(--chat-blue);
+      }
+    }
+
+    .agentTitle {
+      font-size: 24px;
+      font-weight: 700;
+    }
+  }
+}
+
+.paramsSection {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+  .filterRow {
+    display: flex;
+    align-items: center;
+    column-gap: 12px;
+
+    .filterParamName {
+      width: 120px;
+    }
+
+    .filterParamValueField {
+      width: 230px;
+    }
+
+    .questionExample {
+      width: 100%;
+    }
+  }
+}
+
+.basicInfo {
+  margin: 20px;
+  background: #fff;
+  border-radius: 6px;
+
+  .basicInfoTitle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 30px;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 14px 20px;
+    border-bottom: 1px solid #e8e8e8;
+  }
+
+  .infoContent {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+  }
+}
+
+.toolSection {
+  margin: 20px;
+  background: #fff;
+  border-radius: 6px;
+
+  .toolSectionTitleBar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    column-gap: 30px;
+    padding: 14px 20px;
+    border-bottom: 1px solid #e8e8e8;
+
+    .toolSectionTitle {
+      font-size: 16px;
+      font-weight: 500;
+    }
+  }
+
+  .emptyHolder {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 300px;
+  }
+
+  .toolsContent {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    padding: 20px 20px 30px;
+
+    .toolItem {
+      width: 300px;
+      padding: 12px;
+      border-radius: 10px;
+      border: 1px solid #e8e8e8;
+      display: flex;
+      align-items: center;
+      column-gap: 12px;
+      cursor: pointer;
+
+      .toolIcon {
+        font-size: 24px;
+        color: var(--chat-blue);
+      }
+
+      .toolContent {
+        flex: 1;
+
+        .toolTopSection {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          .toolType {
+            flex: 1;
+            color: var(--text-color);
+            font-weight: 500;
+            font-size: 16px;
+          }
+
+          .toolOperateIcons {
+            display: flex;
+            align-items: center;
+            column-gap: 10px;
+
+            .toolOperateIcon {
+              color: var(--text-color-third);
+              cursor: pointer;
+
+              &:hover {
+                color: var(--chat-blue);
+              }
+            }
+          }
+        }
+
+        .toolDesc {
+          margin-top: 2px;
+          width: 220px;
+          font-size: 13px;
+          color: var(--text-color-third);
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
--- a/webapp/packages/supersonic-fe/src/pages/Agent/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Agent/type.ts
@@ -0,0 +1,119 @@
+export type MetricOptionType = {
+  id: string;
+  metricId?: number;
+  modelId?: number;
+}
+
+export enum AgentToolTypeEnum {
+  RULE = 'RULE',
+  DSL = 'DSL',
+  PLUGIN = 'PLUGIN',
+  INTERPRET = 'INTERPRET'
+}
+
+export enum QueryModeEnum {
+  ENTITY_DETAIL = 'ENTITY_DETAIL',
+  ENTITY_LIST_FILTER = 'ENTITY_LIST_FILTER',
+  ENTITY_ID = 'ENTITY_ID',
+  METRIC_ENTITY = 'METRIC_ENTITY',
+  METRIC_FILTER = 'METRIC_FILTER',
+  METRIC_GROUPBY = 'METRIC_GROUPBY',
+  METRIC_MODEL = 'METRIC_MODEL',
+  METRIC_ORDERBY = 'METRIC_ORDERBY'
+}
+
+export const AGENT_TOOL_TYPE_LIST = [
+  {
+    label: '规则',
+    value: AgentToolTypeEnum.RULE
+  },
+  {
+    label: 'LLM语义解析',
+    value: AgentToolTypeEnum.DSL
+  },
+  {
+    label: '指标解读',
+    value: AgentToolTypeEnum.INTERPRET
+  },
+  {
+    label: '插件',
+    value: AgentToolTypeEnum.PLUGIN
+  },
+]
+
+export const QUERY_MODE_LIST = [
+  {
+    label: '实体明细(查询维度信息)',
+    value: QueryModeEnum.ENTITY_DETAIL
+  },
+  {
+    label: '实体圈选',
+    value: QueryModeEnum.ENTITY_LIST_FILTER
+  },
+  {
+    label: '实体查询(按ID查询)',
+    value: QueryModeEnum.ENTITY_ID
+  },
+  {
+    label: '指标查询(带实体)',
+    value: QueryModeEnum.METRIC_ENTITY
+  },
+  {
+    label: '指标查询(带条件)',
+    value: QueryModeEnum.METRIC_FILTER
+  },
+  {
+    label: '指标查询(按维度分组)',
+    value: QueryModeEnum.METRIC_GROUPBY
+  },
+  {
+    label: '指标查询(不带条件)',
+    value: QueryModeEnum.METRIC_MODEL
+  },
+  {
+    label: '按指标排序',
+    value: QueryModeEnum.METRIC_ORDERBY
+  }
+];
+
+export type AgentToolType = {
+  id?: string;
+  type: AgentToolTypeEnum;
+  name: string;
+  queryModes?: QueryModeEnum[];
+  plugins?: number[];
+  metricOptions?: MetricOptionType[];
+  exampleQuestions?: string[];
+  modelIds?: number[];
+}
+
+export type AgentConfigType = {
+  tools: AgentToolType[];
+}
+
+export type AgentType = {
+  id?: number;
+  name?: string;
+  description?: string;
+  createdBy?: string;
+  updatedBy?: string;
+  createdAt?: string;
+  updatedAt?: string;
+  examples?: string[];
+  status?: 0 | 1;
+  enableSearch?: 0 | 1;
+  agentConfig?: AgentConfigType;
+}
+
+export type ModelType = {
+  id: number | string;
+  parentId: number;
+  name: string;
+  bizName: string;
+};
+
+export type MetricType = {
+  id: number;
+  name: string;
+  bizName: string;
+};
--- a/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/ChatFooter/index.tsx
@@ -8,24 +8,26 @@ import type { ForwardRefRenderFunction } from 'react';
 import { searchRecommend } from 'supersonic-chat-sdk';
 import { SemanticTypeEnum, SEMANTIC_TYPE_MAP } from '../constants';
 import styles from './style.less';
-import { PLACE_HOLDER } from '../constants';
-import { DefaultEntityType, ModelType } from '../type';
+import { DefaultEntityType, AgentType, ModelType } from '../type';
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

 type Props = {
  inputMsg: string;
  chatId?: number;
  currentModel?: ModelType;
+  currentAgent?: AgentType;
  defaultEntity?: DefaultEntityType;
  isCopilotMode?: boolean;
  copilotFullscreen?: boolean;
  models: ModelType[];
+  agentList: AgentType[];
  collapsed: boolean;
  onToggleCollapseBtn: () => void;
  onInputMsgChange: (value: string) => void;
  onSendMsg: (msg: string, modelId?: number) => void;
  onAddConversation: () => void;
  onCancelDefaultFilter: () => void;
+  onSelectAgent: (agent: AgentType) => void;
 };

 const { OptGroup, Option } = Select;
@@ -45,8 +47,10 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    inputMsg,
    chatId,
    currentModel,
+    currentAgent,
    defaultEntity,
    models,
+    agentList,
    collapsed,
    isCopilotMode,
    copilotFullscreen,
@@ -55,10 +59,11 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    onSendMsg,
    onAddConversation,
    onCancelDefaultFilter,
+    onSelectAgent,
  },
  ref,
 ) => {
-  const [modelOptions, setModelOptions] = useState<ModelType[]>([]);
+  const [modelOptions, setModelOptions] = useState<(ModelType | AgentType)[]>([]);
  const [stepOptions, setStepOptions] = useState<Record<string, any[]>>({});
  const [open, setOpen] = useState(false);
  const [focused, setFocused] = useState(false);
@@ -121,6 +126,9 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      const model = models.find((item) => msg.includes(`@${item.name}`));
      msgValue = model ? msg.replace(`@${model.name}`, '') : msg;
      modelId = model?.id;
+    } else if (msg?.[0] === '/') {
+      const agent = agentList.find((item) => msg.includes(`/${item.name}`));
+      msgValue = agent ? msg.replace(`/${agent.name}`, '') : msg;
    }
    return { msgValue, modelId };
  };
@@ -163,9 +171,9 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
  const [debounceGetWords] = useState<any>(debounceGetWordsFunc);

  useEffect(() => {
-    if (inputMsg.length === 1 && inputMsg[0] === '@') {
+    if (inputMsg.length === 1 && (inputMsg[0] === '@' || inputMsg[0] === '/')) {
      setOpen(true);
-      setModelOptions(models);
+      setModelOptions(inputMsg[0] === '/' ? agentList : models);
      setStepOptions({});
      return;
    } else {
@@ -173,10 +181,10 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
      if (modelOptions.length > 0) {
        setTimeout(() => {
          setModelOptions([]);
-        }, 500);
+        }, 50);
      }
    }
-    if (!isSelect) {
+    if (!isSelect && currentAgent?.name !== '问知识') {
      debounceGetWords(inputMsg, models, chatId, currentModel);
    } else {
      isSelect = false;
@@ -237,6 +245,12 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    isSelect = true;
    if (modelOptions.length === 0) {
      sendMsg(value);
+    } else {
+      const agent = agentList.find((item) => value.includes(item.name));
+      if (agent) {
+        onSelectAgent(agent);
+        onInputMsgChange('');
+      }
    }
    setOpen(false);
    setTimeout(() => {
@@ -249,12 +263,98 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
    [styles.defaultCopilotMode]: isCopilotMode && !copilotFullscreen,
  });

+  const restrictNode = currentModel && !isMobile && (
+    <div className={styles.currentModel}>
+      <div className={styles.currentModelName}>
+        输入联想与问题回复将限定于：“
+        <span className={styles.quoteText}>
+          {!defaultEntity && <>主题域【{currentModel.name}】</>}
+          {defaultEntity && (
+            <>
+              <span>{`${currentModel.name.slice(0, currentModel.name.length - 1)}【`}</span>
+              <span className={styles.entityName} title={defaultEntity.entityName}>
+                {defaultEntity.entityName}
+              </span>
+              <span>】</span>
+            </>
+          )}
+        </span>
+        ”
+      </div>
+      <div className={styles.cancelModel} onClick={onCancelDefaultFilter}>
+        取消限定
+      </div>
+    </div>
+  );
+
+  const modelOptionNodes = modelOptions.map((model) => {
+    return (
+      <Option
+        key={model.id}
+        value={inputMsg[0] === '/' ? `/${model.name} ` : `@${model.name} `}
+        className={styles.searchOption}
+      >
+        {model.name}
+      </Option>
+    );
+  });
+
+  const associateOptionNodes = Object.keys(stepOptions).map((key) => {
+    return (
+      <OptGroup key={key} label={key}>
+        {stepOptions[key].map((option) => {
+          let optionValue =
+            Object.keys(stepOptions).length === 1
+              ? option.recommend
+              : `${option.modelName || ''}${option.recommend}`;
+          if (inputMsg[0] === '@') {
+            const model = models.find((item) => inputMsg.includes(item.name));
+            optionValue = model ? `@${model.name} ${option.recommend}` : optionValue;
+          } else if (inputMsg[0] === '/') {
+            const agent = agentList.find((item) => inputMsg.includes(item.name));
+            optionValue = agent ? `/${agent.name} ${option.recommend}` : optionValue;
+          }
+          return (
+            <Option
+              key={`${option.recommend}${option.modelName ? `_${option.modelName}` : ''}`}
+              value={optionValue}
+              className={styles.searchOption}
+            >
+              <div className={styles.optionContent}>
+                {option.schemaElementType && (
+                  <Tag
+                    className={styles.semanticType}
+                    color={
+                      option.schemaElementType === SemanticTypeEnum.DIMENSION ||
+                      option.schemaElementType === SemanticTypeEnum.MODEL
+                        ? 'blue'
+                        : option.schemaElementType === SemanticTypeEnum.VALUE
+                        ? 'geekblue'
+                        : 'cyan'
+                    }
+                  >
+                    {SEMANTIC_TYPE_MAP[option.schemaElementType] ||
+                      option.schemaElementType ||
+                      '维度'}
+                  </Tag>
+                )}
+                {option.subRecommend}
+              </div>
+            </Option>
+          );
+        })}
+      </OptGroup>
+    );
+  });
+
  return (
    <div className={chatFooterClass}>
      <div className={styles.composer}>
-        <div className={styles.collapseBtn} onClick={onToggleCollapseBtn}>
-          {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-        </div>
+        {!isMobile && (
+          <div className={styles.collapseBtn} onClick={onToggleCollapseBtn}>
+            {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+          </div>
+        )}
        <Tooltip title="新建对话">
          <IconFont
            type="icon-icon-add-conversation-line"
@@ -263,36 +363,14 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
          />
        </Tooltip>
        <div className={styles.composerInputWrapper}>
-          {currentModel && (
-            <div className={styles.currentModel}>
-              <div className={styles.currentModelName}>
-                输入联想与问题回复将限定于：“
-                <span className={styles.quoteText}>
-                  主题域【{currentModel.name}】
-                  {defaultEntity && (
-                    <>
-                      <span>，</span>
-                      <span>{`${currentModel.name.slice(0, currentModel.name.length - 1)}【`}</span>
-                      <span className={styles.entityName} title={defaultEntity.entityName}>
-                        {defaultEntity.entityName}
-                      </span>
-                      <span>】</span>
-                    </>
-                  )}
-                </span>
-                ”
-              </div>
-              <div className={styles.cancelModel} onClick={onCancelDefaultFilter}>
-                取消限定
-              </div>
-            </div>
-          )}
+          {/* {restrictNode}
+          {currentAgentNode} */}
          <AutoComplete
            className={styles.composerInput}
            placeholder={
-              currentModel
-                ? `请输入【${currentModel.name}】主题的问题，可使用@切换到其他主题`
-                : PLACE_HOLDER
+              currentAgent?.name
+                ? `智能助理【${currentAgent?.name}】将与您对话，可输入“/”切换助理`
+                : '请输入您的问题'
            }
            value={inputMsg}
            onChange={onInputMsgChange}
@@ -302,10 +380,20 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
            ref={inputRef}
            id="chatInput"
            onKeyDown={(e) => {
-              if ((e.code === 'Enter' || e.code === 'NumpadEnter') && !isSelect) {
-                const chatInputEl: any = document.getElementById('chatInput');
-                sendMsg(chatInputEl.value);
-                setOpen(false);
+              if (e.code === 'Enter' || e.code === 'NumpadEnter') {
+                {
+                  const chatInputEl: any = document.getElementById('chatInput');
+                  if (!isSelect) {
+                    sendMsg(chatInputEl.value);
+                    setOpen(false);
+                  } else {
+                    const agent = agentList.find((item) => chatInputEl.value.includes(item.name));
+                    if (agent) {
+                      onSelectAgent(agent);
+                      onInputMsgChange('');
+                    }
+                  }
+                }
              }
            }}
            onFocus={() => {
@@ -320,64 +408,7 @@ const ChatFooter: ForwardRefRenderFunction<any, Props> = (
            open={open}
            getPopupContainer={(triggerNode) => triggerNode.parentNode}
          >
-            {modelOptions.length > 0
-              ? modelOptions.map((model) => {
-                  return (
-                    <Option
-                      key={model.id}
-                      value={`@${model.name} `}
-                      className={styles.searchOption}
-                    >
-                      {model.name}
-                    </Option>
-                  );
-                })
-              : Object.keys(stepOptions).map((key) => {
-                  return (
-                    <OptGroup key={key} label={key}>
-                      {stepOptions[key].map((option) => {
-                        let optionValue =
-                          Object.keys(stepOptions).length === 1
-                            ? option.recommend
-                            : `${option.modelName || ''}${option.recommend}`;
-                        if (inputMsg[0] === '@') {
-                          const model = models.find((item) => inputMsg.includes(item.name));
-                          optionValue = model ? `@${model.name} ${option.recommend}` : optionValue;
-                        }
-                        return (
-                          <Option
-                            key={`${option.recommend}${
-                              option.modelName ? `_${option.modelName}` : ''
-                            }`}
-                            value={optionValue}
-                            className={styles.searchOption}
-                          >
-                            <div className={styles.optionContent}>
-                              {option.schemaElementType && (
-                                <Tag
-                                  className={styles.semanticType}
-                                  color={
-                                    option.schemaElementType === SemanticTypeEnum.DIMENSION ||
-                                    option.schemaElementType === SemanticTypeEnum.MODEL
-                                      ? 'blue'
-                                      : option.schemaElementType === SemanticTypeEnum.VALUE
-                                      ? 'geekblue'
-                                      : 'cyan'
-                                  }
-                                >
-                                  {SEMANTIC_TYPE_MAP[option.schemaElementType] ||
-                                    option.schemaElementType ||
-                                    '维度'}
-                                </Tag>
-                              )}
-                              {option.subRecommend}
-                            </div>
-                          </Option>
-                        );
-                      })}
-                    </OptGroup>
-                  );
-                })}
+            {modelOptions.length > 0 ? modelOptionNodes : associateOptionNodes}
          </AutoComplete>
          <div
            className={classNames(styles.sendBtn, {
--- a/webapp/packages/supersonic-fe/src/pages/Chat/Conversation.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/Conversation.tsx
@@ -90,7 +90,12 @@ const Conversation: ForwardRefRenderFunction<any, Props> = (
        defaultEntityFilter?.entityName && window.location.pathname.includes('detail')
          ? defaultEntityFilter.entityName
          : defaultModelName;
-      onAddConversation({ name: conversationName, type: 'CUSTOMIZE' });
+      onAddConversation({
+        name: conversationName,
+        type: 'CUSTOMIZE',
+        modelId: defaultEntityFilter?.modelId,
+        entityId: defaultEntityFilter?.entityId,
+      });
      onNewConversationTriggered?.();
    }
  }, [triggerNewConversation]);
--- a/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/MessageContainer.tsx
@@ -3,10 +3,13 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { isEqual } from 'lodash';
 import { ChatItem } from 'supersonic-chat-sdk';
 import type { MsgDataType } from 'supersonic-chat-sdk';
-import { MessageItem, MessageTypeEnum } from './type';
+import { AgentType, MessageItem, MessageTypeEnum } from './type';
 import Plugin from './components/Plugin';
 import { updateMessageContainerScroll } from '@/utils/utils';
 import styles from './style.less';
+import { MODEL_MODEL_ENTITY_ID_FILTER_MAP } from './constants';
+import AgentList from './components/AgentList';
+import RecommendQuestions from './components/RecommendQuestions';

 type Props = {
  id: string;
@@ -15,6 +18,7 @@ type Props = {
  isMobileMode?: boolean;
  conversationCollapsed: boolean;
  copilotFullscreen?: boolean;
+  agentList: AgentType[];
  onClickMessageContainer: () => void;
  onMsgDataLoaded: (
    data: MsgDataType,
@@ -24,6 +28,8 @@ type Props = {
  ) => void;
  onCheckMore: (data: MsgDataType) => void;
  onApplyAuth: (model: string) => void;
+  onSendMsg: (value: string) => void;
+  onSelectAgent: (agent: AgentType) => void;
 };

 const MessageContainer: React.FC<Props> = ({
@@ -33,10 +39,12 @@ const MessageContainer: React.FC<Props> = ({
  isMobileMode,
  conversationCollapsed,
  copilotFullscreen,
+  agentList,
  onClickMessageContainer,
  onMsgDataLoaded,
  onCheckMore,
-  onApplyAuth,
+  onSendMsg,
+  onSelectAgent,
 }) => {
  const [triggerResize, setTriggerResize] = useState(false);

@@ -97,6 +105,7 @@ const MessageContainer: React.FC<Props> = ({
    }
    return [
      {
+        ...MODEL_MODEL_ENTITY_ID_FILTER_MAP[modelId],
        value: entityId,
      },
    ];
@@ -109,6 +118,7 @@ const MessageContainer: React.FC<Props> = ({
          const {
            id: msgId,
            modelId,
+            agentId,
            entityId,
            type,
            msg,
@@ -125,6 +135,17 @@ const MessageContainer: React.FC<Props> = ({
          return (
            <div key={msgId} id={`${msgId}`} className={styles.messageItem}>
              {type === MessageTypeEnum.TEXT && <Text position="left" data={msg} />}
+              {type === MessageTypeEnum.RECOMMEND_QUESTIONS && (
+                <RecommendQuestions onSelectQuestion={onSendMsg} />
+              )}
+              {type === MessageTypeEnum.AGENT_LIST && (
+                <AgentList
+                  currentAgentName={msg!}
+                  data={agentList}
+                  copilotFullscreen={copilotFullscreen}
+                  onSelectAgent={onSelectAgent}
+                />
+              )}
              {type === MessageTypeEnum.QUESTION && (
                <>
                  <Text position="right" data={msg} />
@@ -134,6 +155,7 @@ const MessageContainer: React.FC<Props> = ({
                    msgData={msgData}
                    conversationId={chatId}
                    modelId={modelId}
+                    agentId={agentId}
                    filter={getFilters(modelId, entityId)}
                    isLastMessage={index === messageList.length - 1}
                    isMobileMode={isMobileMode}
@@ -150,6 +172,7 @@ const MessageContainer: React.FC<Props> = ({
                  msg={msgValue || msg || ''}
                  conversationId={chatId}
                  modelId={modelId}
+                  agentId={agentId}
                  filter={getFilters(modelId, entityId)}
                  isLastMessage={index === messageList.length - 1}
                  isMobileMode={isMobileMode}
@@ -192,7 +215,8 @@ function areEqual(prevProps: Props, nextProps: Props) {
    prevProps.id === nextProps.id &&
    isEqual(prevProps.messageList, nextProps.messageList) &&
    prevProps.conversationCollapsed === nextProps.conversationCollapsed &&
-    prevProps.copilotFullscreen === nextProps.copilotFullscreen
+    prevProps.copilotFullscreen === nextProps.copilotFullscreen &&
+    prevProps.agentList === nextProps.agentList
  ) {
    return true;
  }
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentList/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentList/index.tsx
@@ -0,0 +1,63 @@
+import LeftAvatar from '../CopilotAvatar';
+import Message from '../Message';
+import styles from './style.less';
+import { AgentType } from '../../type';
+import classNames from 'classnames';
+
+type Props = {
+  currentAgentName: string;
+  data: AgentType[];
+  copilotFullscreen?: boolean;
+  onSelectAgent: (agent: AgentType) => void;
+};
+
+const AgentList: React.FC<Props> = ({
+  currentAgentName,
+  data,
+  copilotFullscreen,
+  onSelectAgent,
+}) => {
+  const agentClass = classNames(styles.agent, {
+    [styles.fullscreen]: copilotFullscreen,
+  });
+  return (
+    <div className={styles.agentList}>
+      <LeftAvatar />
+      <Message position="left" bubbleClassName={styles.agentListMsg}>
+        <div className={styles.title}>
+          您好，智能助理【{currentAgentName}
+          】将与您对话，点击以下卡片或者输入“/”可切换助理：
+        </div>
+        <div className={styles.content}>
+          {data.map((agent) => (
+            <div
+              key={agent.id}
+              className={agentClass}
+              onClick={() => {
+                onSelectAgent(agent);
+              }}
+            >
+              <div className={styles.topBar}>
+                <div className={styles.agentName}>{agent.name}</div>
+                <div className={styles.tip}>您可以这样问：</div>
+              </div>
+              <div className={styles.examples}>
+                {agent.examples?.length > 0 ? (
+                  agent.examples.map((example) => (
+                    <div key={example} className={styles.example}>
+                      “{example}”
+                    </div>
+                  ))
+                ) : (
+                  <div className={styles.example}>{agent.description}</div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Message>
+    </div>
+  );
+};
+
+export default AgentList;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentList/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/components/AgentList/style.less
@@ -0,0 +1,63 @@
+.agentList {
+  display: flex;
+  margin-top: 12px;
+
+  .agentListMsg {
+    padding: 12px 20px 20px !important;
+
+    .title {
+      margin-bottom: 12px;
+      font-weight: 500;
+      font-size: 14px;
+    }
+
+    .content {
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 20px;
+      column-gap: 14px;
+      row-gap: 14px;
+
+      .agent {
+        flex: 0 0 calc(50% - 7px);
+        padding: 10px 14px 20px;
+        color: var(--text-color);
+        font-size: 14px;
+        background-color: #f4f4f4;
+        border-radius: 17px;
+        cursor: pointer;
+
+        .topBar {
+          .agentName {
+            font-weight: 700;
+          }
+
+          .tip {
+            margin-top: 2px;
+            font-size: 13px;
+            font-style: italic;
+          }
+        }
+
+        .examples {
+          display: flex;
+          flex-direction: column;
+          margin-top: 12px;
+          font-size: 13px;
+          row-gap: 8px;
+
+          .example {
+            padding: 4px 12px;
+            background-color: #ededed;
+            border-radius: 15px;
+          }
+        }
+
+        &.fullscreen {
+          flex: none;
+          width: 280px;
+        }
+      }
+    }
+  }
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/index.tsx
@@ -9,8 +9,9 @@ import {
  ModelType,
  MessageItem,
  MessageTypeEnum,
+  AgentType,
 } from './type';
-import { getModelList } from './service';
+import { getModelList, queryAgentList } from './service';
 import { useThrottleFn } from 'ahooks';
 import Conversation from './Conversation';
 import ChatFooter from './ChatFooter';
@@ -64,6 +65,8 @@ const Chat: React.FC<Props> = ({
  const [applyAuthVisible, setApplyAuthVisible] = useState(false);
  const [applyAuthModel, setApplyAuthModel] = useState('');
  const [initialModelName, setInitialModelName] = useState('');
+  const [agentList, setAgentList] = useState<AgentType[]>([]);
+  const [currentAgent, setCurrentAgent] = useState<AgentType>();
  const location = useLocation();
  const dispatch = useDispatch();
  const { modelName } = (location as any).query;
@@ -71,9 +74,19 @@ const Chat: React.FC<Props> = ({
  const conversationRef = useRef<any>();
  const chatFooterRef = useRef<any>();

+  const initAgentList = async () => {
+    const res = await queryAgentList();
+    const agentListValue = (res.data || []).filter((item) => item.status === 1);
+    setAgentList(agentListValue);
+    if (agentListValue.length > 0) {
+      setCurrentAgent(agentListValue[0]);
+    }
+  };
+
  useEffect(() => {
    setChatSdkToken(localStorage.getItem(AUTH_TOKEN_KEY) || '');
    initModels();
+    initAgentList();
  }, []);

  useEffect(() => {
@@ -102,7 +115,13 @@ const Chat: React.FC<Props> = ({
    if (initMsg) {
      inputFocus();
      if (initMsg === 'CUSTOMIZE' && copilotSendMsg) {
-        onSendMsg(copilotSendMsg, [], modelId, entityId);
+        onSendMsg(
+          copilotSendMsg,
+          [],
+          modelId,
+          entityId,
+          agentList.find((item) => item.name === '做分析'),
+        );
        dispatch({
          type: 'globalState/setCopilotSendMsg',
          payload: '',
@@ -143,16 +162,9 @@ const Chat: React.FC<Props> = ({
    setMessageList([
      {
        id: uuid(),
-        type: MessageTypeEnum.TEXT,
-        msg: defaultModelName
-          ? `您好，请输入关于${
-              defaultEntityFilter?.entityName
-                ? `${defaultModelName?.slice(0, defaultModelName?.length - 1)}【${
-                    defaultEntityFilter?.entityName
-                  }】`
-                : `【${defaultModelName}】`
-            }的问题`
-          : '您好，请问有什么我能帮您吗？',
+        type: MessageTypeEnum.RECOMMEND_QUESTIONS,
+        // type: MessageTypeEnum.AGENT_LIST,
+        // msg: currentAgent?.name || '查信息',
      },
    ]);
  };
@@ -161,7 +173,6 @@ const Chat: React.FC<Props> = ({
    return list.map((item: HistoryMsgItemType) => ({
      id: item.questionId,
      type:
-        item.queryResult?.queryMode === MessageTypeEnum.PLUGIN ||
        item.queryResult?.queryMode === MessageTypeEnum.WEB_PAGE
          ? MessageTypeEnum.PLUGIN
          : MessageTypeEnum.QUESTION,
@@ -212,6 +223,10 @@ const Chat: React.FC<Props> = ({
    }
  };

+  const changeAgent = (agent?: AgentType) => {
+    setCurrentAgent(agent);
+  };
+
  const initModels = async () => {
    const res = await getModelList();
    const modelList = getLeafList(res.data);
@@ -236,6 +251,7 @@ const Chat: React.FC<Props> = ({
    list?: MessageItem[],
    modelId?: number,
    entityId?: string,
+    agent?: AgentType,
  ) => {
    const currentMsg = msg || inputMsg;
    if (currentMsg.trim() === '') {
@@ -252,13 +268,26 @@ const Chat: React.FC<Props> = ({
      modelChanged = currentModel?.id !== toModel?.id;
    }
    const modelIdValue = modelId || msgModel?.id || currentModel?.id;
+
+    const msgAgent = agentList.find((item) => currentMsg.indexOf(item.name) === 1);
+    const certainAgent = currentMsg[0] === '/' && msgAgent;
+    const agentIdValue = certainAgent ? msgAgent.id : undefined;
+    if (agent || certainAgent) {
+      changeAgent(agent || msgAgent);
+    }
+
    const msgs = [
      ...(list || messageList),
      {
        id: uuid(),
        msg: currentMsg,
-        msgValue: certainModel ? currentMsg.replace(`@${msgModel.name}`, '').trim() : currentMsg,
+        msgValue: certainModel
+          ? currentMsg.replace(`@${msgModel.name}`, '').trim()
+          : certainAgent
+          ? currentMsg.replace(`/${certainAgent.name}`, '').trim()
+          : currentMsg,
        modelId: modelIdValue === -1 ? undefined : modelIdValue,
+        agentId: agent?.id || agentIdValue || currentAgent?.id,
        entityId: entityId || (modelChanged ? undefined : defaultEntity?.entityId),
        identityMsg: certainModel ? getIdentityMsgText(msgModel) : undefined,
        type: MessageTypeEnum.QUESTION,
@@ -398,8 +427,22 @@ const Chat: React.FC<Props> = ({
    inputFocus();
  };

+  const onSelectAgent = (agent: AgentType) => {
+    setCurrentAgent(agent);
+    setMessageList([
+      ...messageList,
+      {
+        id: uuid(),
+        type: MessageTypeEnum.TEXT,
+        msg: `您好，智能助理【${agent.name}】将与您对话，可输入“/”切换助理`,
+      },
+    ]);
+    updateMessageContainerScroll();
+  };
+
  const chatClass = classNames(styles.chat, {
-    [styles.mobile]: isMobileMode,
+    [styles.mobileMode]: isMobileMode,
+    [styles.mobile]: isMobile,
    [styles.copilotFullscreen]: copilotFullscreen,
    [styles.conversationCollapsed]: conversationCollapsed,
  });
@@ -431,16 +474,21 @@ const Chat: React.FC<Props> = ({
                  isMobileMode={isMobileMode}
                  conversationCollapsed={conversationCollapsed}
                  copilotFullscreen={copilotFullscreen}
+                  agentList={agentList}
                  onClickMessageContainer={inputFocus}
                  onMsgDataLoaded={onMsgDataLoaded}
                  onCheckMore={onCheckMore}
                  onApplyAuth={onApplyAuth}
+                  onSendMsg={onSendMsg}
+                  onSelectAgent={onSelectAgent}
                />
                <ChatFooter
                  inputMsg={inputMsg}
                  chatId={currentConversation?.chatId}
                  models={models}
+                  agentList={agentList}
                  currentModel={currentModel}
+                  currentAgent={currentAgent}
                  defaultEntity={defaultEntity}
                  collapsed={conversationCollapsed}
                  isCopilotMode={isCopilotMode}
@@ -461,6 +509,7 @@ const Chat: React.FC<Props> = ({
                      onCancelCopilotFilter();
                    }
                  }}
+                  onSelectAgent={onSelectAgent}
                  ref={chatFooterRef}
                />
              </div>
--- a/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/service.ts
@@ -1,5 +1,5 @@
 import { request } from 'umi';
-import { ModelType } from './type';
+import { AgentType, ModelType } from './type';

 const prefix = '/api';

@@ -66,3 +66,9 @@ export function queryRecommendQuestions() {
    method: 'GET',
  });
 }
+
+export function queryAgentList() {
+  return request<Result<AgentType[]>>(`${prefix}/chat/agent/getAgentList`, {
+    method: 'GET',
+  });
+}
--- a/webapp/packages/supersonic-fe/src/pages/Chat/style.less
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/style.less
@@ -101,12 +101,12 @@
            display: flex;
            flex-direction: column;
            padding: 20px 20px 60px 4px;
-            row-gap: 10px;
+            row-gap: 16px;

            .messageItem {
              display: flex;
              flex-direction: column;
-              row-gap: 10px;
+              row-gap: 20px;

              :global {
                .ant-table-small {
@@ -240,9 +240,8 @@
    }
  }

-  &.mobile {
+  &.mobileMode {
    height: 100% !important;
-
    .chatSection {
      width: 100% !important;
      height: 100% !important;
@@ -276,6 +275,10 @@
      }
    }
  }
+
+  &.mobile {
+    height: 100vh !important;
+  }
 }

 .conversation {
@@ -444,10 +447,6 @@
  color: var(--primary-color);
 }

-// .messageItem {
-//   margin-top: 12px;
-// }
-
 .messageTime {
  display: flex;
  align-items: center;
--- a/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
+++ b/webapp/packages/supersonic-fe/src/pages/Chat/type.ts
@@ -11,6 +11,7 @@ export enum MessageTypeEnum {
  WEB_PAGE = 'WEB_PAGE', // 插件
  RECOMMEND_QUESTIONS = 'recommend_questions', // 推荐问题
  PARSE_OPTIONS = 'parse_options', // 解析选项
+  AGENT_LIST = 'agent_list', // 专家列表
 }

 export type MessageItem = {
@@ -20,6 +21,7 @@ export type MessageItem = {
  msgValue?: string;
  identityMsg?: string;
  modelId?: number;
+  agentId?: number;
  entityId?: string;
  msgData?: MsgDataType;
  quote?: string;
@@ -47,7 +49,6 @@ export enum MessageModeEnum {

 export type ModelType = {
  id: number;
-  parentId: number;
  name: string;
  bizName: string;
 };
@@ -69,6 +70,7 @@ export type DefaultEntityType = {
  entityId: string;
  entityName: string;
  modelName?: string;
+  modelId?: number;
 };

 export type SuggestionItemType = {
@@ -82,3 +84,11 @@ export type SuggestionType = {
  dimensions: SuggestionItemType[];
  metrics: SuggestionItemType[];
 };
+
+export type AgentType = {
+  id: number;
+  name: string;
+  description: string;
+  examples: string[];
+  status: 0 | 1;
+};
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/DetailModal.tsx
@@ -12,9 +12,9 @@ import {
 } from './type';
 import { getLeafList, uuid } from '@/utils/utils';
 import styles from './style.less';
-import { PARSE_MODE_MAP, PLUGIN_TYPE_MAP } from './constants';
+import { PLUGIN_TYPE_MAP } from './constants';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { isArray, set } from 'lodash';
+import { isArray } from 'lodash';

 const FormItem = Form.Item;
 const { TextArea } = Input;
--- a/webapp/packages/supersonic-fe/src/pages/ChatPlugin/constants.ts
+++ b/webapp/packages/supersonic-fe/src/pages/ChatPlugin/constants.ts
@@ -1,7 +1,8 @@
 export const PLUGIN_TYPE_MAP = {
-  WEB_PAGE: '外链页面',
+  WEB_PAGE: 'Web页面',
  WEB_SERVICE: 'Web服务',
-  DSL: 'LLM语义解析',
+  // DSL: 'LLM语义解析',
+  // CONTENT_INTERPRET: '内容解读',
 }

 export const PARSE_MODE_MAP = {