Some minor fixes.

Author: notsyncing

web/src/components/llm-mcp-server-select.tsx

@@ -4,7 +4,7 @@ import { truncate } from 'lodash';
 
 interface IProps {
   value?: string;
-  onChange?: (value: string) => void;
+  onChange?: (value: string, option: any) => void;
   disabled?: boolean;
 }
 

web/src/hooks/mcp-server-setting-hooks.tsx

@@ -25,7 +25,11 @@ export const useFetchMultipleMcpServers = (idList: string[]): ResponseGetType<IM
     initialData: [],
     gcTime: 0,
     queryFn: async () => {
-      const { data } = await mcpServerService.get_multiple({ id_list: idList});
+      if (!idList) {
+        return [];
+      }
+      
+      const { data } = await mcpServerService.get_multiple({ id_list: idList });
       return data?.data ?? [];
     },
   });

web/src/pages/flow/form/generate-form/hooks.ts

@@ -74,12 +74,7 @@ export const useBuildMcpServerVariableOptions = (nodeId: string) => {
   const { getNode } = useGraphStore((state) => state);
   const node = getNode(nodeId);
   const selectedMcpServerIdList = node?.data.form.llm_enabled_mcp_servers;
-
-  if (!selectedMcpServerIdList) {
-    return [];
-  }
-
-  const { data: selectedMcpServers } = useFetchMultipleMcpServers(selectedMcpServerIdList);
+  const { data: selectedMcpServers } = useFetchMultipleMcpServers(selectedMcpServerIdList || []);
 
   return selectedMcpServers.map(s => ({
     label: s.name,

web/src/pages/flow/form/generate-form/index.tsx

@@ -13,16 +13,35 @@ const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
   const [isCurrentLlmSupportTools, setCurrentLlmSupportTools] = useState(false);
+  const [newMcpServerVariableMap, setNewMcpServerVariableMap] = useState<any[]>(node!!.data.form.mcp_server_variable_map);
 
   const onLlmSelectChanged = (_: string, option: any) => {
-    setCurrentLlmSupportTools(option.is_tools);
+    setTimeout(() => {
+      setCurrentLlmSupportTools(option.is_tools);
+    }, 0);
 
     if (!option.is_tools) {
       node!!.data.form.llm_enabled_tools = [];
       node!!.data.form.llm_enabled_mcp_servers = [];
+      node!!.data.form.mcp_server_variable_map = [];
     }
   };
 
+  const onMcpServerSelectChanged = (_: string, option: any[]) => {
+    const existing_servers = new Set(option.map((o: any) => o.value));
+    const new_map = [];
+
+    for (const m of node?.data.form.mcp_server_variable_map || []) {
+      const server_id = m.target.split('@')[1];
+
+      if (existing_servers.has(server_id)) {
+        new_map.push(m);
+      }
+    }
+
+    setNewMcpServerVariableMap(new_map);
+  };
+
   return (
     <Form
       name="basic"
@@ -65,9 +84,14 @@ const GenerateForm = ({ onValuesChange, form, node }: IOperatorForm) => {
         label={t('modelEnabledMcpServers', { keyPrefix: 'chat' })}
         tooltip={t('modelEnabledMcpServersTip', { keyPrefix: 'chat' })}
       >
-        <LLMMcpServerSelect disabled={!isCurrentLlmSupportTools}></LLMMcpServerSelect>
+        <LLMMcpServerSelect disabled={!isCurrentLlmSupportTools} onChange={onMcpServerSelectChanged}></LLMMcpServerSelect>
       </Form.Item>
-      <McpInputVariable name="mcp_server_variable_map" node={node!!} />
+      <McpInputVariable
+        name="mcp_server_variable_map"
+        node={node!!}
+        disabled={!isCurrentLlmSupportTools}
+        newMap={newMcpServerVariableMap}
+      />
       <Form.Item
         name={['cite']}
         label={t('cite')}

web/src/pages/flow/form/generate-form/mcp-input-variable.tsx

@@ -1,16 +1,18 @@
 import { RAGFlowNodeType } from '@/interfaces/database/flow';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Collapse, Flex, Form, Input, Select } from 'antd';
-import { PropsWithChildren, useCallback } from 'react';
+import { PropsWithChildren, useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useBuildComponentIdSelectOptions } from '../../hooks/use-get-begin-query';
 
 import styles from './index.less';
 import { useBuildMcpServerVariableOptions } from './hooks';
 
 interface IProps {
-  name?: string;
+  name: string;
   node: RAGFlowNodeType;
+  disabled?: boolean;
+  newMap?: any[];
 }
 
 enum VariableType {
@@ -21,8 +23,7 @@ enum VariableType {
 const getVariableName = (type: string) =>
   type === VariableType.Reference ? 'component_id' : 'value';
 
-const McpVariableForm = ({ name: formName, node }: IProps) => {
-  const nextFormName = formName || 'query';
+const McpVariableForm = ({ name: formName, node, disabled }: IProps) => {
   const { t } = useTranslation();
 
   const targetOptions = useBuildMcpServerVariableOptions(node.id);
@@ -42,15 +43,15 @@ const McpVariableForm = ({ name: formName, node }: IProps) => {
   const handleTypeChange = useCallback(
     (name: number) => () => {
       setTimeout(() => {
-        form.setFieldValue([nextFormName, name, 'component_id'], undefined);
-        form.setFieldValue([nextFormName, name, 'value'], undefined);
+        form.setFieldValue([formName, name, 'component_id'], undefined);
+        form.setFieldValue([formName, name, 'value'], undefined);
       }, 0);
     },
-    [form, nextFormName],
+    [form, formName],
   );
 
   return (
-    <Form.List name={nextFormName}>
+    <Form.List name={formName}>
       {(fields, { add, remove }) => (
         <>
           {fields.map(({ key, name, ...restField }) => (
@@ -79,7 +80,7 @@ const McpVariableForm = ({ name: formName, node }: IProps) => {
               </Form.Item>
               <Form.Item noStyle dependencies={[name, 'type']}>
                 {({ getFieldValue }) => {
-                  const type = getFieldValue([nextFormName, name, 'type']);
+                  const type = getFieldValue([formName, name, 'type']);
                   return (
                     <Form.Item
                       {...restField}
@@ -108,6 +109,7 @@ const McpVariableForm = ({ name: formName, node }: IProps) => {
               block
               icon={<PlusOutlined />}
               className={styles.addButton}
+              disabled={disabled}
             >
               {t('flow.addVariable')}
             </Button>
@@ -137,11 +139,20 @@ export function FormCollapse({
   );
 }
 
-const McpInputVariable = ({ name, node }: IProps) => {
+const McpInputVariable = ({ name, node, disabled, newMap }: IProps) => {
   const { t } = useTranslation();
+
+  useEffect(() => {
+    node!!.data.form.mcp_server_variable_map = newMap;
+  }, [newMap]);
+
   return (
     <FormCollapse title={t('flow.mcpInputVariable')}>
-      <McpVariableForm name={name} node={node}></McpVariableForm>
+      <McpVariableForm
+        name={name}
+        node={node}
+        disabled={disabled}
+      ></McpVariableForm>
     </FormCollapse>
   );
 };