[elsa] Add MCPServerConfig configuration to the large model node. (#206)

Author: RonnyChan96

framework/elsa/fit-elsa-react/src/common/Consts.js

@@ -214,4 +214,12 @@ export const DEFAULT_KNOWLEDGE_RETRIEVAL_NODE_KNOWLEDGE_CONFIG_ID = {
   type: DATA_TYPES.STRING,
   from: FROM_TYPE.INPUT,
   value: '',
+};
+
+export const DEFAULT_MCP_SERVERS = {
+  id: uuidv4(),
+  name: "mcpServers",
+  type: DATA_TYPES.OBJECT,
+  from: FROM_TYPE.INPUT,
+  value: {}
 };

framework/elsa/fit-elsa-react/src/components/common/prompt/Prompt.jsx

@@ -4,7 +4,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import React from 'react';
+import React, {useState} from 'react';
 import {Button, Col, Form, Input, Popover, Row} from 'antd';
 import {QuestionCircleOutlined} from '@ant-design/icons';
 import './prompt.css';
@@ -39,10 +39,12 @@ export const Prompt = (
   }) => {
   const shape = useShapeContext();
   const form = useFormContext();
+  const [promptContent, setPromptContent] = useState(prompt.value);
 
   const _onChange = (promptText) => {
     onChange(promptText);
     form.setFieldsValue({[name]: promptText});
+    setPromptContent(promptText);
   };
 
   /**
@@ -96,7 +98,7 @@ export const Prompt = (
             name={name}
             label={getLabel()}
             rules={rules}
-            initialValue={prompt.value}
+            initialValue={promptContent}
             validateTrigger='onBlur'
           >
             <TextArea
@@ -108,7 +110,7 @@ export const Prompt = (
             />
           </Form.Item>
           <PromptDrawer
-            value={prompt.value}
+            value={promptContent}
             name={name}
             title={title}
             rules={rules}

framework/elsa/fit-elsa-react/src/components/llm/LlmFormWrapper.jsx

@@ -16,6 +16,7 @@ import {Trans, useTranslation} from 'react-i18next';
 import {v4 as uuidv4} from 'uuid';
 import {SkillForm} from '@/components/llm/SkillForm.jsx';
 import {KnowledgeForm} from './KnowledgeForm.jsx';
+import {McpConfigForm} from '@/components/llm/McpConfigForm.jsx';
 
 LlmFormWrapper.propTypes = {
   data: PropTypes.object.isRequired,
@@ -53,6 +54,7 @@ export default function LlmFormWrapper({data, shapeStatus}) {
     prompt: data.inputParams.filter(item => item.name === 'prompt')
       .flatMap(item => item.value)
       .find(item => item.name === 'template'),
+    mcpServers: data.inputParams.find(item => item.name === 'mcpServers'),
   };
   const knowledgeData = data.inputParams.find(item => item.name === 'knowledgeBases');
   const enableLogData = data.inputParams.find(item => item.name === 'enableLog');
@@ -195,6 +197,7 @@ export default function LlmFormWrapper({data, shapeStatus}) {
         modelData={modelData} shapeId={shape.id}
         modelOptions={modelOptions}/>
       <SkillForm disabled={shapeStatus.disabled} toolOptions={toolOptions}/>
+      <McpConfigForm disabled={shapeStatus.disabled} modelData={modelData} shapeId={shape.id}/>
       <LlmOutput outputItems={data.outputParams} enableLogData={enableLogData} disabled={shapeStatus.disabled}/>
     </div>
   );

framework/elsa/fit-elsa-react/src/components/llm/McpConfigForm.jsx

@@ -0,0 +1,97 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) 2025 Huawei Technologies Co., Ltd. All rights reserved.
+ *  This file is a part of the ModelEngine Project.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {Collapse} from 'antd';
+import {useDispatch} from '@/components/DefaultRoot.jsx';
+import PropTypes from 'prop-types';
+import {Trans, useTranslation} from 'react-i18next';
+import React, {useState} from 'react';
+import {Prompt} from '@/components/common/prompt/Prompt.jsx';
+import FullScreenIcon from '../asserts/icon-full-screen.svg?react';
+import {JadeCollapse} from '@/components/common/JadeCollapse.jsx';
+
+const {Panel} = Collapse;
+
+/**
+ * 大模型节点MCP配置表单。
+ *
+ * @param shapeId 所属图形唯一标识。
+ * @param modelData 数据.
+ * @param disabled 是否禁用.
+ * @returns {JSX.Element} 大模型节点模型表单的DOM。
+ */
+const _McpConfigForm = ({shapeId, modelData, disabled}) => {
+  const dispatch = useDispatch();
+  const {t} = useTranslation();
+  const [configOpen, setConfigOpen] = useState(false);
+
+  const JsonValidator = () => ({
+    validator(_, value) {
+      try {
+        if (value) JSON.parse(value);
+        return Promise.resolve();
+      } catch (err) {
+        return Promise.reject(t('pleaseEnterValidJson'));
+      }
+    },
+  });
+
+  const mcpServerConfigContent = (<div className={'jade-font-size'} style={{lineHeight: '1.2', whiteSpace: 'pre'}}>
+    <Trans i18nKey='mcpServerConfigPopover' components={{p: <p/>}}/>
+  </div>);
+
+  return (<>
+    <JadeCollapse defaultActiveKey={['mcpServerConfigPanel']}>
+      {<Panel
+        key={'mcpServerConfigPanel'}
+        header={<div className='panel-header'>
+          <span className='jade-panel-header-font'>{t('mcpServerConfig')}</span>
+        </div>}
+        className='jade-panel'
+      >
+        <div className={'jade-custom-panel-content'}>
+          <Prompt
+            prompt={{
+              ...modelData.mcpServers,
+              value: JSON.stringify(modelData.mcpServers.value, null, 2),
+            }}
+            rules={[{required: true, message: t('paramCannotBeEmpty')}, JsonValidator]}
+            name={`mcpServers-${shapeId}`}
+            tips={mcpServerConfigContent}
+            onChange={(text) => {
+              try {
+                const newObj = JSON.parse(text); // 解析字符串
+                dispatch({type: 'changeMcpServers', id: modelData.mcpServers.id, value: newObj});
+              } catch (err) {
+                // 不影响
+              }
+            }}
+            buttonConfigs={[{
+              icon: <FullScreenIcon/>, onClick: () => {
+                setConfigOpen(true);
+              },
+            }]}
+            disabled={disabled}
+            open={configOpen}
+            setOpen={setConfigOpen}/>
+        </div>
+      </Panel>}
+    </JadeCollapse>
+  </>);
+};
+
+_McpConfigForm.propTypes = {
+  shapeId: PropTypes.string.isRequired, // 确保 shapeId 是一个必需的string类型
+  modelData: PropTypes.object.isRequired, // 确保 modelData 是一个必需的object类型
+  disabled: PropTypes.bool, // 确保 modelOptions 是一个必需的array类型
+};
+
+const areEqual = (prevProps, nextProps) => {
+  return prevProps.modelData.mcpServers === nextProps.modelData.mcpServers &&
+    prevProps.disabled === nextProps.disabled;
+};
+
+export const McpConfigForm = React.memo(_McpConfigForm, areEqual);

framework/elsa/fit-elsa-react/src/components/llm/ModelForm.jsx

@@ -223,11 +223,4 @@ DialogueRound.propTypes = {
   onConversationTurnChange: PropTypes.func,
 };
 
-_ModelForm.propTypes = {
-  shapeId: PropTypes.string.isRequired, // 确保 shapeId 是一个必需的string类型
-  modelData: PropTypes.object.isRequired, // 确保 modelData 是一个必需的object类型
-  modelOptions: PropTypes.array.isRequired, // 确保 modelOptions 是一个必需的array类型
-  disabled: PropTypes.bool, // 确保 modelOptions 是一个必需的array类型
-};
-
 export const ModelForm = React.memo(_ModelForm, areEqual);

framework/elsa/fit-elsa-react/src/components/llm/llmComponent.jsx

@@ -7,15 +7,15 @@
 import LlmFormWrapper from './LlmFormWrapper.jsx';
 import {v4 as uuidv4} from 'uuid';
 import {defaultComponent} from '@/components/defaultComponent.js';
-import {DEFAULT_MAX_MEMORY_ROUNDS} from '@/common/Consts.js';
+import {DEFAULT_MAX_MEMORY_ROUNDS, DEFAULT_MCP_SERVERS} from '@/common/Consts.js';
 import {
     AddInputParamReducer,
     AddOutputParamReducer,
     AddSkillReducer,
     ChangeAccessInfoConfigReducer,
     ChangeConfigReducer,
     ChangeInputParamsReducer,
-    ChangeKnowledgeReducer,
+    ChangeKnowledgeReducer, ChangeMcpServersReducer,
     ChangeOutputParamReducer,
     ChangePromptReducer,
     ChangeSkillConfigReducer,
@@ -55,6 +55,7 @@ export const llmComponent = (jadeConfig, shape) => {
     addReducer(builtInReducers, DeleteToolReducer(shape, self));
     addReducer(builtInReducers, MoveKnowledgeItemReducer(shape, self));
     addReducer(builtInReducers, UpdateLogStatusReducer(shape, self));
+    addReducer(builtInReducers, ChangeMcpServersReducer(shape, self));
 
     /**
      * 必须.
@@ -126,6 +127,7 @@ export const llmComponent = (jadeConfig, shape) => {
                     type: 'Array',
                     value: [],
                 },
+                JSON.parse(JSON.stringify(DEFAULT_MCP_SERVERS)),
             ],
             outputParams: [
                 {

framework/elsa/fit-elsa-react/src/components/llm/reducers/reducers.js

@@ -815,5 +815,45 @@ export const UpdateLogStatusReducer = () => {
     return newConfig;
   };
 
+  return self;
+};
+
+/**
+ * changeMcpServers 事件处理器.
+ *
+ * @return {{}} 处理器对象.
+ * @constructor
+ */
+export const ChangeMcpServersReducer = () => {
+  const self = {};
+  self.type = 'changeMcpServers';
+
+  /**
+   * 处理方法.
+   *
+   * @param config 配置数据.
+   * @param action 事件对象.
+   * @return {*} 处理之后的数据.
+   */
+  self.reduce = (config, action) => {
+    const newConfig = {};
+    Object.entries(config).forEach(([key, value]) => {
+      if (key === 'inputParams') {
+        newConfig[key] = value.map(item => {
+          if (item.name === 'mcpServers') {
+            return {
+              ...item, value: action.value,
+            };
+          } else {
+            return item;
+          }
+        });
+      } else {
+        newConfig[key] = value;
+      }
+    });
+    return newConfig;
+  };
+
   return self;
 };

framework/elsa/fit-elsa-react/src/flow/compatibility/compatibilityProcessors.js

@@ -16,7 +16,7 @@ import {
   DEFAULT_MAX_MEMORY_ROUNDS,
   END_NODE_TYPE,
   FLOW_TYPE,
-  FROM_TYPE,
+  FROM_TYPE, DEFAULT_MCP_SERVERS,
 } from '@/common/Consts.js';
 import {getEndNodeType} from '@/components/end/endNodeUtils.js';
 import {pageProcessor} from '@/flow/pageProcessors.js';
@@ -432,6 +432,7 @@ export const llmCompatibilityProcessor = (shapeData, graph, pageHandler) => {
     const outputObject = self.shapeData.flowMeta.jober.converter.entity.outputParams.find(i => i.name === 'output');
     ensureParam(inputParams, DEFAULT_MAX_MEMORY_ROUNDS);
     ensureParam(inputParams, DEFAULT_LLM_KNOWLEDGE_BASES);
+    ensureParam(inputParams, DEFAULT_MCP_SERVERS);
     ensureParam(outputObject.value, DEFAULT_LLM_REFERENCE_OUTPUT);
     addEnableLog(inputParams);
     if (!self.shapeData.flowMeta.jober.converter.entity.tempReference) {

framework/elsa/fit-elsa-react/src/i18n/en_US.json

@@ -417,5 +417,8 @@
   "parallelNode": "Parallel Node",
   "type": "Type",
   "orchestration": "Orchestration",
-  "manual": "Manual"
+  "manual": "Manual",
+  "mcpServerConfig": "MCP Server Configuration",
+  "pleaseEnterValidJson": "Please enter a valid JSON format!",
+  "mcpServerConfigPopover": "Example: \n{\n  \"server_name\": {\n    \"url\": \"https://127.0.0.1:80/sse\",\n    \"headers\": {},\n    \"timeout\": 10,\n    \"sse_read_timeout\": 300\n  }\n}"
 }

framework/elsa/fit-elsa-react/src/i18n/zh_CN.json

@@ -710,5 +710,8 @@
   "parallelNode": "并行节点",
   "type": "类型",
   "orchestration": "编排",
-  "manual": "人工"
+  "manual": "人工",
+  "mcpServerConfig": "MCP服务配置",
+  "pleaseEnterValidJson": "请输入合法的 JSON 格式！",
+  "mcpServerConfigPopover": "示例：\n{\n  \"server_name\": {\n    \"url\": \"https://127.0.0.1:80/sse\",\n    \"headers\": {},\n    \"timeout\": 10,\n    \"sse_read_timeout\": 300\n  }\n}"
 }